javascript - 嵌套的 Bootstrap 折叠 onclick 事件

Question

我完全不熟悉 Bootstrap 和编码，所以我目前正在尝试使用包含嵌套子面板的 onclick 事件打开我的主 Bootstrap 面板。

这是我的 index.html，包含面板和按钮；

<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>

<form onsubmit="return false" id="searchForm">
    <input type="button" value="Search" id="search" class="openPanel" />
</form>  
      
<br/><br/>

<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="#collapse6">Sub panel 3</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>

我已经尝试使用此代码打开主 - 面板，但无法正常工作；

<script type="text/javascript">
    $(document).ready(function () {
        $("#search").on("click", function () {
            $(this).closest('.panel-heading').find('.collapse').collapse('show');
        });
    });                
</script>

至于我的问题，有没有简单有效的方法仅打开主 - 面板点击按钮，打开后按钮不会影响面板了吗？

谢谢。

Answer 1

给您一个解决方案 https://jsfiddle.net/hbfvta27/

$(document).ready(function () {
  $("#search").on("click", function () {
    if( !$('.collapse').first().hasClass('in'))
      $('a[data-toggle="collapse"]').first().click();
  });
});    

<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>
<form onsubmit="return false" id="searchForm">
    <input type="button" value="Search" id="search" class="openPanel" />
</form>  
      
<br/><br/>

<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="#collapse6">Sub panel 3</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>

希望对您有所帮助。