无手风琴引导和折叠

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

我该如何让它工作？

谢谢。

来源

2014-06-13 Odin

可能重复的[当其它打开关闭一个DIV - 自举（http://stackoverflow.com/questions/23971819/close-one-div-when-the-other-opens-引导程序） – Nicolai

您的解决方案是否仅适用于Bootstrap 2.x？因为我用Bootstrap 3.x试过了，它不起作用。当我将JavaScript和'data-collapse-group'添加到我的链接时，没有什么变化。我甚至改变它的按钮，但仍然没有运气。 – Odin

它是为bootstrap 3.x制作的。请检查我的答案。 – Nicolai

我加2个附加属性为a标签：指定哪些申报单必须data-target和data-collapse-group（自定义属性折叠）。

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'); 
    }); 
});

UPDATE：

的0

$("[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

来源

2014-06-14 11:42:52 Nicolai

好的，现在它可以像我需要的那样工作，谢谢。还有一件事，它并不重要，但它提供了更好的用户体验：现在，当我展开div #filtr时，视图向上滚动到div＃filtr的开头，所以它的工作原理就像#top等。是否有可能像手风琴一样工作？所以div＃filtr会滑落，a标签停留在位置，#filtr只显示在下面？ – Odin

@Odin，检查我答案的更新部分。 – Nicolai

这是完美的。非常感谢你！ – Odin

我不知道该怎么做，在引导的方式，但我会做这样

首先东西，我会隐藏所有collapse div的，然后我会告诉我需要给出一个对任何DIV单击事件

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

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

来源

2014-06-13 13:06:21 Raghuveer

谢谢你的解决方案，但它不能100％正确工作。是的，它隐藏了一个'.mobile-options-item'并显示第二个，但是你不能通过点击链接关闭已经扩展的项目。检查你的bootply链接。 – Odin

无手风琴引导和折叠

回答

相关问题