引导程序崩溃没有唯一标识符 [英] Bootstrap collapse without unique identifier

问题描述

我试图使用引导程序崩溃插件，以便不需要唯一标识符。通常，页面上通常会有一个或几个可折叠的元素。

但是我的元素是动态生成的，并且传递索引键是过度的。

现在发生的情况是，如果我切换 element2 的折叠，它会折叠元素1 。很明显，因为他们有相同的ID。

任何方式实现这个，而不实际给每个可折叠元素一个唯一的ID？

这里有一个功能强大的js小提琴：

http：// jsfiddle.net/hhvrjnr3/

解决方案

可以做到。首先从要折叠的元素中移除 data-target =＃collapseExample。然后在切换按钮上添加额外的类，我添加了collapser。这并不是真的需要，但确定切换按钮非常好。然后添加一些jQuery来进行切换，在这种情况下，我使用 next（）来获取切换按钮的后续元素，这是您希望折叠的元素。 / p>

  $（'。collapser'）。click（function（）{
 $（this）.next（）。 collapse（'toggle'）; 
}）; 
  

示例jsFiddle

I'm trying to use the bootstrap collapse plugin in such a way that a unique identifier is not required. Normally there is usually a single or a couple of collapsible elements on a page.

But my elements are generated dynamically and passing index keys is overkill.

What happens now is that if I toggle the collapse for element2, it will collapse element1. Obviously because they have the same ID.

Any way to achieve this without actually giving each collapsible element a unique id?

Here's a functional js fiddle:

http://jsfiddle.net/hhvrjnr3/

解决方案

It can be done. First remove the data-target="#collapseExample" from the elements you want to collapse. Then add an extra class to your toggle button, I've added 'collapser'. That's not really needed, but it's nice to identify the toggle button. Then add some jQuery to do the toggling, in this case I am using next() to get the subsequent element to the toggle button which is your element you wish to collapse.

$('.collapser').click(function() {
    $(this).next().collapse('toggle');
});

Example jsFiddle

这篇关于引导程序崩溃没有唯一标识符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！