Question

我使用最新的bootstrap，手风琴根本不起作用..我的意思是，当我用嵌套的'ul'打开测试1时，它会切换，但是当我用另一个嵌套的'ul'点击测试2时，它切换也，但没有关闭测试1 ...

任何人都可以帮助我吗？看起来它不适用于'ul'和'li'（没有面板类）。

提前致谢。

P.S。这是我手风琴的完整代码试试。除了先前打开的自动关闭，一切正常。

http://jsbin.com/OKOjUlu/1/edit?html,output

<div class="row">
    <div class="page-header">
        <h3>Proizvodi</h3>

    </div>
    <div class="col-md-3">
        <ul class="nav nav-stacked" id="accordion1">
            <li> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>

                <ul id="firstLink" class="collapse">
                    <li>SubTest1</li>
                    <li>SubTest1</li>
                    <li>SubTest1</li>
                </ul>
            </li>
            <li> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>

                <ul id="secondLink" class="collapse">
                    <li>SubTest2</li>
                    <li>SubTest2</li>
                    <li>SubTest2</li>
                    <li>SubTest2</li>
                </ul>
            </li>
            <li><a href="#">Test1</a>
            </li>
            <li><a href="#">Test1</a>
            </li>
        </ul>
    </div>
    <div class="col-md-9"></div>
</div>

Answer 1

Bootstrap主要是在添加/删除css类及其规则时蓬勃发展。所以结构需要相同才能使效果与div的效果相同。您错过的是叶片上的<li class="panel">，其中包含触发器及其各自的菜单。在你的情况下，你错过了它们。

BS代码：

//In the below line this is supposed to fetch the active elements 
//but in your case it did not match anything hence it failed to fetch active elements to make it inactive.
var actives = this.$parent && this.$parent.find('> .panel > .in')

    if (actives && actives.length) {
      var hasData = actives.data('bs.collapse')
      if (hasData && hasData.transitioning) return
      actives.collapse('hide')
      hasData || actives.data('bs.collapse', null)
    }

所以试试：

         <ul class="nav nav-stacked" id="accordion1">
            <li class="panel"> 
              <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>
              <ul id="firstLink" class="collapse panel-collapse in">
                    <li>SubTest1</li>
                    <li>SubTest1</li>
                    <li>SubTest1</li>
                </ul>
            </li>
            <li class="panel"> 
               <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>
               <ul id="secondLink" class="collapse panel-collapse">
                    <li>SubTest2</li>
                    <li>SubTest2</li>
                    <li>SubTest2</li>
                    <li>SubTest2</li>
                </ul>
            </li>
        </ul>

由于此设计旨在与div一起使用，因此您必须覆盖一些专门针对li的规则，如下所示。

#accordion1 li.panel{
    margin-bottom: 0px;
}

<强> Demo

Answer 2

试试这个：

脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>

HTML：

<div class="bs-example">
<div id="myAccordion" class="accordion">
 <div class="accordion-group">
        <div class="accordion-heading">
            <a href="#collapseOne" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">Test12</a>
        </div>
        <div class="accordion-body collapse" id="collapseOne">
            <div class="accordion-inner">
                <ul>
                  <li>SubTest1</li>
                  <li>SubTest1</li>
                 <li>SubTest1</li>
                </ul>
            </div>
        </div>
    </div>
 </div>
</div>

点击此处：Demo

Bootstrap手风琴/可折叠无法使用ul / li导航

2 个答案: