Bootstrap面板折叠onclick事件和glyphicons

Question

我对bootstraps相当新，我正在尝试为按钮添加一个onclick事件，这只会打开我的主引导面板。

这是我的引导程序面板所在的HTML代码部分;

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-groupMain">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Main panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Sub panels -->
          <div class="panel-group" id="accordion">
              <!-- Sub panel 1 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentOne"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 2 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse3" class="panel-collapse collapse">
                      <div class="panel-body">
                          <div class="day" data-name="Tuesday"></div>
                          <p id="contentTwo"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 3 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse4" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentThree"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 4 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse5" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFour"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 5 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse6" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFive"></p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

至于字形，我尝试过这段代码，但它只在你打开/关闭同一个子面板时切换变化，那么当你打开不同的子面板时，字形图有什么简单的方法可以改变吗？

$(document).ready(function () {
        $('[data-toggle="collapse"]').click(function () {
            $(this).find('span').toggleClass('glyphicon-chevron-
            down').toggleClass('glyphicon-chevron-up');
        });
    });

感谢任何帮助。

Answer 1

＆＃13;

＆＃13;

$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
  
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}

});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-groupMain">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Main panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Sub panels -->
          <div class="panel-group" id="accordion">
              <!-- Sub panel 1 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentOne"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 2 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse3" class="panel-collapse collapse">
                      <div class="panel-body">
                          <div class="day" data-name="Tuesday"></div>
                          <p id="contentTwo"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 3 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse4" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentThree"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 4 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse5" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFour"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 5 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse6" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFive"></p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

跨度不在a内，因此您需要导航到父级并从那里找到。我在您的代码行中添加了parent()。我还添加了重置其他标题面板的逻辑

Answer 2

您可以使用解决方案https://jsfiddle.net/mc3z6ad3/2/

＆＃13;

＆＃13;

$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
	$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
	$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
  
	$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
	
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-groupMain">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Main panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Sub panels -->
          <div class="panel-group" id="accordion">
              <!-- Sub panel 1 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentOne"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 2 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse3" class="panel-collapse collapse">
                      <div class="panel-body">
                          <div class="day" data-name="Tuesday"></div>
                          <p id="contentTwo"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 3 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse4" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentThree"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 4 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse5" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFour"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 5 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse6" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFive"></p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;