首页 文章

切换图标问题

提问于
浏览 次
0

我正在使用bootstrap accordion元素来隐藏和显示内容 . 当手风琴区域扩大时，我还在手风琴 Headers 旁边添加了字体真棒图标和切换图标功能 . 现在的问题是，当我点击 Headers 时，图标将不会切换，但如果我点击图标它自己就可以了很好，但我也想要与 Headers 相同的功能 .

这是代码

$(".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

5 回答

  • 0

    您必须将click事件触发到big元素，然后切换i元素的类 . p.s我将一个类.click添加到应该发生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>
    回复于
  • 1
    <!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

    回复于
  • 0

    请试一试

    $(".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>
    回复于
  • 0

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

    $(".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>
    回复于
  • 1

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

    $(".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>
    回复于

相关问题