切换图标的问题

【问题标题】：Issue with toggle icon切换图标的问题
【发布时间】：2016-08-29 12:33:53
【问题描述】：

我正在使用引导手风琴元素来隐藏和显示内容。 当手风琴区域展开时，我还在手风琴标题旁边添加了带有切换图标功能的字体真棒图标很好，但我也想要与标题相同的功能。

这是代码

  $(".fa").on("click", function(){
    $(this).toggleClass("fa-minus");
  });
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <div class="panel-group" id="accordion1">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
            Big <i class="fa fa-plus pull-right"></i>
          </a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.
        </div>
      </div>
    </div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

谁能帮我解决这个问题？

提前感谢您的努力

【问题讨论】：

    标签： jquery html twitter-bootstrap


    【解决方案1】：

    你必须触发大元素的点击事件，然后切换 i 元素的类。 p.s 我在应该发生点击事件的元素中添加了一个 .click 类。 

      $(".click").on("click", function(){
    $(this).find('.fa').toggleClass("fa-minus");
  });
    <!DOCTYPE html>
<html lang="en">

<head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

</head>
  
<body>
  
  <div class="panel-group" id="accordion1">
                  <div class="panel panel-default">
                    <div class="panel-heading ">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" class = "click">
                          Big <i class="click fa fa-plus pull-right"></i>
                        </a>
                      </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.
                      </div>
                    </div>
                  </div>
    </div>
  
  
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

    【讨论】：

    • 像魅力兄弟一样工作 感谢您的建议
    • 一个小问题是，如果您单击文本和图标以外的任何位置，该图标也会切换。如何解决这个问题？？
    • 我更新了答案。您可以通过从元素中删除 .click 类并将其放置到文本（a 标签）和 +（i 标签）来做到这一点
    • 完美运行。感谢您宝贵的时间。
    【解决方案2】： 
    <!DOCTYPE html>
<html lang="en">

<head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

  <div class="panel-group" id="accordion1">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" class="accorionId">
                          Big <i class="fa fa-plus pull-right"></i>
                        </a>
                      </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.
                      </div>
                    </div>
                  </div>
    </div>


<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(".accorionId").on("click", function(){
    $($(this).find('.fa')).toggleClass("fa-minus");
});
</script>
</body>
</html>

    请检查它现在的工作情况 codePan

    【讨论】：

    • 能否告诉我如何在此处附加 CodePan 或 JSFiddle 链接？我是 Stack Overflow 的新手，不知道如何放置此链接。我试过了，但它说你不能直接附加链接。
    • 你必须写任何像 codepen 这样的词，然后选择那个 codepen 并从 code pen 和 jsfiddle 将相应的 URL 附加到那个词并添加简单
    【解决方案3】：

    请试一试

      $(".panel-heading").on("click", function(){
    $(this).find('.fa').toggleClass("fa-minus");
  });
    <!DOCTYPE html>
<html lang="en">

<head>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

</head>
  
<body>
  
  <div class="panel-group" id="accordion1">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
                          Big <i class="fa fa-plus pull-right"></i>
                        </a>
                      </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.
                      </div>
                    </div>
                  </div>
    </div>
  
  

</body>
</html>

    【讨论】：

      【解决方案4】：

      将脚本移动到现在在正文中的头部

        $(".fa").on("click", function(){
    $(this).toggleClass("fa-minus");
  });
      <!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
      <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                  <div class="panel-heading">
                        <h4 class="panel-title">
                              <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
                                Big <i class="fa fa-plus pull-right"></i>
                              </a>
                        </h4>
                  </div>
                  <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                              commodo consequat.
                        </div>      
                  </div>
            </div>
    </div>
</body>
</html>

      【讨论】：

      • 你改变了什么？解释用户做错了什么，以便他可以从中吸取教训；）。
      • 当你点击 Big 时，它也应该被改变
      • 是的，当我们点击编辑时，我们也会进行切换。我看到 $ 未定义的错误，因此将脚本移动到正文中的头部
      【解决方案5】：

      这适用于所有手风琴标签：

        $(".panel-title a").on("click", function(){
    $(this).children(".fa").toggleClass("fa-plus fa-minus");
  });
      <!DOCTYPE html>
<html lang="en">

<head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

<!--Add the below code to so you can click anywhere on the title and the accordion will work. -->
<style>
  .panel-title a{
     display:block;
  }
</style>
</head>
  
<body>
  
  <div class="panel-group" id="accordion1">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
                          Big <i class="fa fa-plus pull-right"></i>
                        </a>
                      </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.
                      </div>
                    </div>
                  </div>
    </div>
  
  
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2021-12-31
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-05-28
        • 2016-01-30
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode