📌  相关文章
📜  如何使用 boot-strap 和 jQuery 在没有按钮的情况下在两个图标之间切换?

📅  最后修改于: 2021-11-25 03:07:58             🧑  作者: Mango

给定一个带有两个图标的 HTML 文档,任务是在用户每次点击图标时交替显示图标。借助 jQuery(一个 JavaScript 库)可以轻松完成此任务。

方法:方法是简单地向两个图标添加一个“点击”事件侦听器,并使用 jQuery 切换两个图标的 CSS 类。这些类最终负责显示图标库(在本例中为 Fontawesome)中的特定图标。在这里,我们使用了两个图标,

  1. 一个类名为“fa-bars”(菜单图标)
  2. 一个班名为“fa-times”(十字图标)

每当用户单击菜单图标时,其“fa-bars”类将切换为“fa-times”,因此将显示十字图标,反之亦然。

例子:

HTML


  

    
    
  
    
    
  
    
    
      
    
    

  

    
    
      
    

  


输出: