Question

我有两个主播和两个div，我想使用折叠功能来隐藏和显示div的内容。它工作正常，但我有一个问题，当我点击第一个锚它展开，但当我点击第二个它显示第二个的内容，但不要隐藏第一个的内容。

<div class="row mobile-options hidden-md hidden-lg">
 <ul>
  <li class="col-xs-4"><a href="#filtr" class="mobile-options-item" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a></li>
  <li class="col-xs-4"><a href="#categories" class="mobile-options-item" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-list"></i></span> Categories</a></li>
 </ul>
</div>


<div id="filtr" class="collapse">
       Filtr content
</div>


<div id="categories" class="collapse">
       Categories content
</div>

演示：http://www.bootply.com/IdbPEK3ROM

我无法使用.accordion或.panel，因为div不是彼此相邻的。

我怎样才能让它发挥作用？

谢谢。

Answer 1

我为a代码添加了2个附加属性：data-target和data-collapse-group（自定义属性，指定必须折叠哪些div）。

jsFiddle exmpale

<强> HTML：

<div class="container">
    <div class="row mobile-options">
        <ul>
            <li class="col-xs-2"><a href="#filtr" data-target="#filtr" class="mobile-options-item" data-collapse-group="myDivs"  data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a>
            </li>
            <li class="col-xs-2"><a href="#categories" data-target="#categories" class="mobile-options-item" data-collapse-group="myDivs"  data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-list"></i></span> Categories</a>
            </li>
        </ul>
    </div>
    <div id="filtr" class="collapse">
        <p>Filtr content</p>
    </div>
    <div id="categories" class="collapse">
        <p>Categories content</p>
    </div>
</div>

<强> JavaScript的：

$("[data-collapse-group='myDivs']").click(function () {
    var $this = $(this);
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () {
        $($(this).data("target")).removeClass("in").addClass('collapse');
    });
});

<强>更新

$("[data-collapse-group='myDivs']").click(function (e) {
    e.preventDefault();
        var $this = $(this);
        $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () {
            $($(this).data("target")).removeClass("in").addClass('collapse');
        });
    });

jsFiddle

Answer 2

我不知道如何以引导方式进行，但我会做这样的事情

首先我将隐藏所有collapse div，然后我会根据点击事件显示我需要显示的div

$(function(){
  $('.mobile-options-item').click(function(){
    $('.collapse').hide();
    var target = $(this).attr('href');
    $(target).show();
    });
})

链接：http://www.bootply.com/pVfjihcVYE

没有手风琴的Bootstrap和折叠

2 个答案: