Bootstrap 不使用Accordian的引导和折叠

esyap4oy 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(154)

我有两个锚点和两个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不是相邻的。
我怎样才能让它工作呢？

谢谢-谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/24205860/bootstrap-and-collapse-without-accordian

2条答案

按热度按时间

niwlg2el1#

我为a标记添加了两个附加属性：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

赞(0）回复(0）举报 2022-12-07

u1ehiz5o2#

我不知道如何用 Bootstrap 的方式来做，但我会这样做
首先，我将隐藏所有collapse div，然后根据单击事件显示需要显示的任何div

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

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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 不使用Accordian的引导和折叠

2条答案

相关问题

热门标签

最新问答