首页 文章

Bootstrap手风琴当面板不在面板组的正下方时，折叠不能按预期工作

提问于
浏览 次
1

我使用了带有3个静态面板的自举手风琴和一个由角度选择器添加的动态面板 . 由于选择器，额外的div包裹第四个面板，因此面板不再直接位于面板组下面 . 因此，折叠适用于3个静态面板，但不适用于手风琴中动态添加的面板：详细说明，在扩展第四个面板后，当我尝试点击前三个面板中的任何一个时，第四个面板不会崩溃 .

我已经复制了我的问题in this tryit editor link .

我知道解决问题的一种肮脏方法是使用jquery并手动使手风琴折叠 . 有没有更好的方法？

更新：Here是一个更新的链接，其中动态生成的内容有两个面板由额外的div包装 . 和以前一样，面板4和面板5的手风琴行为不正常 .

jquery html twitter-bootstrap accordion

2 回答

  • 0

    我不确定结果，可能会有所帮助 .

    将此类 panel panel-default 添加到动态生成的父级 . 并且不要在动态内容中添加此标记，也不要在结尾标记 </div> 中添加此标记 .

    如果这是正确的，则动态内容中不再有额外的div标记 .

    enter image description here

    回复于
  • 1

    如果适用于您，请尝试以下操作 .

    $(document).ready(function() {

  $(".handleCollapse").click(function() {

    if ($("#collapse4").hasClass('in')) {
      $("#collapse4").removeClass('in');
    }

  });

});

    .collapseToggle {
  height: 0px !important;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Collapse</h2>
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="handleCollapse">Collapsible Group 1</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <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 class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="handleCollapse">Collapsible Group 2</a>
          </h4>
        </div>
        <div id="collapse2" 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 class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="handleCollapse">Collapsible Group 3</a>
          </h4>
        </div>
        <div id="collapse3" 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>
        <!-- This DIV is added because of Angular Selector -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" id="collapse4Toggle">Collapsible Group 4</a>
            </h4>
          </div>
          <div id="collapse4" 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>
    </div>
  </div>

</body>

</html>

    PS：我确实尝试使用jQuery，可能不适合Angular .

    希望这可以帮助

    回复于

相关问题