Question

我刚开始使用bootstraps和编码，因此我目前正在尝试使用包含嵌套子面板的onclick -event打开我的主引导程序面板。

这是我的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>

我已尝试使用此代码打开 main -panel但我无法使其工作;

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

＆＃13;

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

＆＃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/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>

＆＃13;

希望这会对你有所帮助。

Answer 2

只需在点击引导程序面板时添加一个名为“in”的类，我希望它能为您提供帮助

    $(document).ready(function () {
        $(".panel-groupMain").on("click", function () {
            $(this).find('#collapse1').toggleClass('in');
        });
    });

嵌套引导程序崩溃onclick事件

2 个答案: