Question

我正在使用Bootstrap 3制作垂直可折叠导航菜单。文档看起来非常简单。尝试使用data- *标签来做到这一点。 K.I.S.S。

当我展开新的部分时，我似乎无法让其他部分崩溃。即扩展和折叠每个项目的工作。但是，如果设置数据父级，则非活动部分应自动关闭。

有人可以指出我哪里出错吗？

    <li><a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
        <ul id="one" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li><a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
        <ul id="two" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

</ul>

Answer 1

啊......面板类是诀窍...... Javascript必须使用它们作为选择器。

来自bootstrap.js：this.$parent.find('> .panel > .in')

通过将面板类添加到父列表元素，折叠现在可以正常工作。也许Twitter可以使这个功能更具通用性？但它现在正在运作。希望这不是一个黑客......

感谢您的线索......

<ul id="menu">

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
        <ul id="one" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
        <ul id="two" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#three">Three</a>
        <ul id="three" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

</ul>

Answer 2

原因是您使用的是ul和li。按照文档

中的说明使用

<强> Working Demo

HTML

<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="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Answer 3

可折叠的子元素，即li元素应该包含在具有类“panel”的块元素内。简单地将data-parent属性设置为#menu将不起作用。因此，您需要重新构建HTML。

你可以试试这样的东西（不固定的样式让你看起来像以前一样） -

<div id="menu">
  <div class="panel">
    <a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
      <ul id="one" class="collapse">
          <li><a href="#">Point One</a></li>
          <li><a href="#">Point Two</a></li>
          <li><a href="#">Point Three</a></li>
      </ul>
    <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
      <ul id="two" class="collapse">
          <li><a href="#">Point One</a></li>
          <li><a href="#">Point Two</a></li>
          <li><a href="#">Point Three</a></li>
      </ul>
  </div>
</div>

Bootstrap 3 - 可折叠列表未正确折叠

3 个答案: