没有手风琴的引导和折叠答案

【问题标题】：Bootstrap and collapse without Accordian没有手风琴的引导和折叠
【发布时间】：2014-08-04 01:04:54
【问题描述】：

我有两个锚点和两个 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 不相邻。

我怎样才能让它工作？

谢谢。

【问题讨论】：

Close one div when the other opens - Bootstrap的可能重复
您的解决方案仅适用于 Bootstrap 2.x 吗？因为我已经用 Bootstrap 3.x 试过了，但它不起作用。当我将您的 javascript 和 data-collapse-group 添加到我的链接时，没有任何变化。我什至将其更改为按钮，但仍然没有运气。
它是为 bootstrap 3.x 设计的。请检查我的答案。

标签： twitter-bootstrap collapse

【解决方案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

【讨论】：

好的，现在它可以像我需要的那样工作了，谢谢。还有一件事，它不是那么重要，但它提供了更好的用户体验：现在，当我展开 div #filtr 时，视图向上滚动到 div#filtr 的开头，所以它的工作方式类似于 #top 等。是否可以像手风琴一样工作？所以 div#filtr 会向下滑动，a 标签会留在原位，而 #filtr 会显示在下方？
这简直太完美了。非常感谢！

【解决方案2】：

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

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

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

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

【讨论】：

感谢您的解决方案，但它不能 100% 正确工作。是的，它隐藏了一个.mobile-options-item 并显示了第二个，但是您不能通过单击链接来关闭已经展开的项目。检查你的引导链接。