你能为Bootstrap指定一个“数据目标”，它指的是不使用ID的兄弟DOM元素吗？

I am dynamically adding Collapsable elements to a page. Bootstrap uses the "data-target" attribute to specify which element the collapse toggle applies to.

我正在动态地向页面添加可折叠元素。 Bootstrap使用“data-target”属性指定折叠切换应用于哪个元素。

From the docs:

来自文档:

The data-target attribute accepts a css selector

Is there a way to write a selector which specifies the next sibling of the parent element? All of the examples from the docs seem to use selections by ID.

有没有办法编写一个指定父元素的下一个兄弟的选择器?文档中的所有示例似乎都使用ID进行选择。

Specifically the HTML looks like:

具体来说,HTML看起来像:

<div class="accordion-group">
<div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne">
    Generated Title
  </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">
    Generated Content... this is big and sometimes needs collapsing
  </div>
</div>
</div>

I would like to write something like (pseudo code using jquery syntax illegally):

我想写一些像(非法使用jquery语法的伪代码):

<a class="accordion-toggle" data-toggle="collapse" data-target="$(this).parent().next()">

But I am starting to suspect this may not be possible with CSS selectors.

但我开始怀疑CSS选择器可能无法做到这一点。

Right now as a workaround I am generating a new ID (an incrementing number appended to a string) when I create the element.

现在作为一种解决方法,当我创建元素时,我正在生成一个新的ID(一个附加到字符串的递增数字)。

Is there a nicer approach using a selector? Should I be using some post-creation javascript to set the data-target attribute? Is generating IDs for dynamic content the standard approach?

使用选择器有更好的方法吗?我应该使用一些创建后的javascript来设置数据目标属性吗?生成动态内容的ID是标准方法吗?

7 个解决方案

#1

While it is true that the selector in a data-target attribute is a jQuery selector, the data-api specification for this plugin provides no means of referencing back to this in the scope of execution (see lines 147-153 in bootstrap-collapse.js for its use).

虽然data-target属性中的选择器确实是jQuery选择器,但此插件的data-api规范在执行范围内没有提供任何引用的方法(请参阅bootstrap-collapse中的第147-153行)。 js供其使用)。

However, I would like to offer another alternative approach, which is to extend the data-api with your own custom toggle specifier. Let's call it collapse-next.

但是,我想提供另一种替代方法,即使用您自己的自定义切换说明符扩展data-api。我们称之为崩溃 - 接下来。

JS ^{(see update note)}

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
  var $target = $(this).parent().next()
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse()
})

HTML

<a class="accordion-toggle" data-toggle="collapse-next">

JSFiddle (updated)

Downside here is that it's a rather tightly coupled approach, since the JS presumes a specific structure to the markup.

这里的缺点是它是一种相当紧密耦合的方法,因为JS假定了标记的特定结构。

---

Note about IE issues

As @slhck pointed out in his answer, IE9 and under apparently fail on the first click when using an earlier revision of my answer. The cause is actually not an IE issue at all, but rather a Bootstrap one. If one invokes .collapse('toggle') on a target whose Carousel object is uninitialized, the toggle() method will be called twice - once during initialization and then again explicitly after initialization. This is definitely a Bootstrap bug and hopefully will get fixed. The only reason it doesn't appear as a problem in Chrome, FF, IE10, etc, is because they all support CSS transitions, and hence when the second call is made it short-circuits because the first one is still active. The updated workaround above merely avoids the double-call problem by checking for initialization first and handling it differently.

正如@slhck在他的回答中指出的那样,当使用我的答案的早期版本时,IE9和第一次点击显然失败了。原因实际上根本不是IE问题,而是Bootstrap问题。如果在Carousel对象未初始化的目标上调用.collapse('toggle'),则会在初始化期间调用两次toggle()方法,然后在初始化后再次显式调用。这绝对是一个Bootstrap错误,希望能得到解决。它在Chrome,FF,IE10等中没有出现问题的唯一原因是因为它们都支持CSS转换,因此当第二次调用时它会短路,因为第一个仍处于活动状态。上面更新的解决方法仅通过首先检查初始化并以不同方式处理它来避免双重调用问题。

#2

@merv's solution didn't work for me in IE9 and below, since the collapsible state wasn't available unless you clicked at each item once. It did work fine in Firefox and Chrome though. So after two clicks, everything would work.

@ merv的解决方案在IE9及以下版本中对我不起作用,因为除非您单击每个项目一次,否则无法使用可折叠状态。它确实在Firefox和Chrome中运行良好。所以两次点击后,一切都会奏效。

What I did was set a .collapse-next class to the triggering elements, then force their ul siblings to collapse with toggle set to false:

我所做的是为触发元素设置一个.collapse-next类,然后强制他们的ul同胞崩溃并将切换设置为false:

$(".collapse-next").closest('li').each(function(){
  if ($(this).hasClass('active')) {
    // pop up active menu items
    $(this).children("ul").collapse('show');
  } else {
    // just make it collapsible but don't expand
    $(this).children("ul").collapse({ toggle: false });
  }
});

This is for actually toggling the menu state:

这是为了实际切换菜单状态:

$('.collapse-next').click(function(e){
  e.preventDefault();
  $(this).parent().next().collapse('toggle');
});

It seems that using data- attributes is a somewhat more modern and cleaner approach, but for old browsers working with classes and jQuery seems to do the job as well.

似乎使用数据属性是一种更现代和更清晰的方法,但对于使用类和jQuery的旧浏览器似乎也可以完成这项工作。

#3

I think the best approach would be to do this iterate all accordion-toggle elements and set their data-target attribute dynamically via jquery and after that place the code of accordion mentioned in bootstrap.

我认为最好的方法是迭代所有的accordion-toggle元素并通过jquery动态设置它们的data-target属性,然后在bootstrap中提到手风琴的代码。

Example :

$(function(){
    $("a.accordion-toggle").each(function(index) {
        $(this).attr("data-target", "#" + $(this).parent().next().attr("id"));
    });

    // accoridon code
});

Hope this will help

希望这会有所帮助

#4

Yes, you can do it easily! ????

是的,你可以轻松完成! ????

Just add the following code to your scripts and enjoy: ????

只需将以下代码添加到您的脚本中即可享受:????

$('body').on('click','[data-toggle="collapse"][data-mytarget^="$("]',function(){
     eval($(this).data('mytarget')).collapse('toggle');
});

Now every where in your code you can set the target of collapse by a fully dynamic jQuery command inside data-mytarget.

现在,您可以在代码中的每个位置通过data-mytarget中的完全动态jQuery命令设置崩溃目标。

Now use it like it:

现在使用它像:

<a data-toggle="collapse" data-mytarget="$(this).parent().next()">Link</a>

or

<a data-toggle="collapse" data-mytarget="$('#TopMenuBar').closest('ul')">Link</a>

or

<a data-toggle="collapse" data-mytarget="[ EACH IDEAl JQUERY CODE OF YOU STARTED WITH $( ]">Link</a>

Demo:

$('body').on('click','[data-toggle="collapse"][data-mytarget^="$("]',function(){
     eval($(this).data('mytarget')).collapse('toggle');
});

a{
  padding:10px;
  cursor:pointer;
  margin:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle btn btn-info" data-toggle="collapse" data-mytarget="$(this).parent().next()">Collapse It</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse ">
      <div class="accordion-inner">
        Generated Content... this is big and sometimes needs collapsing
      </div>
    </div>
</div>

I used data-mytarget instead of data-target. If you use data-target it works too but the jQuery library raise an error like this: Uncaught Error: Syntax error, unrecognized expression: $(this).parent().next().

我使用了data-mytarget而不是data-target。如果你使用data-target它也可以工作,但是jQuery库引发了这样的错误:Uncaught Error:语法错误,无法识别的表达式:$(this).parent()。next()。

So I defined my different property with data-mytarget name.

所以我用data-mytarget名称定义了我的不同属性。

#5

No javascript solution or it depends on bootstrap's js already in use, just exploiting the DOM structure-

没有javascript解决方案或它取决于已经在使用的bootstrap的js,只是利用DOM结构 -

See the data-target=""...

查看data-target =“”......

A hint for easy way to reduce the bulky solutions-

提示减少庞大解决方案的简便方法 -

<button
data-toggle="collapse"
data-target=".dropdown-toggle:hover + .more-menu"
type="button"
class="btn btn-primary dropdown-toggle"
>
  Toggle Bagal Wala
</button>
<div class="collapse more-menu">I will be toggled</div>

This CSS selection structure will select the desired DOM .dropdown-toggle:hover + .more-menu and there we can apply our desired CSS. There are more ways to exploit what we have. :hover or :active or so many other ways.

这个CSS选择结构将选择所需的DOM .dropdown-toggle:hover + .more-menu,我们可以在那里应用我们想要的CSS。有更多方法可以利用我们拥有的东西。 :悬停或:活跃或许多其他方式。

#6

TYPO3 FCE and Bootstrap Accordion

I am having some trouble with this issue too i am using it in TYPO3 for a customer who wants to be able to add an infinite number of elements to the accordion. So I created a Flexible Content Element and mapped the elements.

我在这个问题上遇到了一些麻烦我也在TYPO3中为想要能够为手风琴添加无数元素的客户使用它。所以我创建了一个灵活的内容元素并映射了元素。

The idea with that data-toggle="collapse-next" did not work for me as expected as it did not close the open elements. I created a new javascript-function doing that please find the code here. Hopefully someone finds the stuff useful.

使用data-toggle =“collapse-next”的想法对我来说不起作用,因为它没有关闭开放元素。我创建了一个新的javascript函数,请在这里找到代码。希望有人发现这些东西很有用。

Javascript

$(document).on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
  var $container = $(this).parents(".accordion");
  var $opencontainers = $container.find(".in");
  var $target = $(this).parent().next();
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse();
  $opencontainers.each(function() {$(this).collapse('toggle')});
})

HTML

<html>
    <div class="accordion">
        <div class="accordion-section">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse-next">
                        Collapsible Group Item #1
                    </a>
                </div>
                <div class="accordion-body collapse">
                    <div class="accordion-inner">
                        Anim pariatur cliche...
                    </div>
                </div>
            </div>
        </div>
    </div>
</html>

#7

Here is an approach that avoids needing unique IDs and avoids a specific html structure.

这是一种避免需要唯一ID并避免特定html结构的方法。

This encloses each instance of the collapse trigger and target in a "section" of html. I like to use class selectors, especially for multiple instances. In this case, it avoids having to create artificial unique IDs.

这将崩溃触发器和目标的每个实例都包含在html的“部分”中。我喜欢使用类选择器,特别是对于多个实例。在这种情况下,它避免了必须创建人工唯一ID。

Borrowing from @merv's excellent answer, I named the data-toggle collapse-section similar to his collapse-next, and added a data-section attribute. Instead of parent().next(), this looks up for a closest() section name, then down for the given target name. They can be siblings or any other level.

借用@ merv的优秀答案,我将数据切换折叠部分命名为类似于他的折叠 - 下一个,并添加了数据部分属性。而不是parent()。next(),这将查找最近的()节名称,然后查找给定目标名称。他们可以是兄弟姐妹或任何其他级别。

(I have a naming convention using "id..." as a prefix for class names that are used as jquery selectors, to avoid mixing with styling.)

(我有一个命名约定,使用“id ...”作为用作jquery选择器的类名的前缀,以避免与样式混合。)

HTML

<div class="accordion-group idCollapseSection">
  <div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse-section"
       data-section=".idCollapseSection" data-target=".idCollapseTarget">
      Generated Title
    </a>
  </div>
  <div>Any other html, at various depths.
    <div class="accordion-body collapse in idCollapseTarget">
      <div class="accordion-inner">
        Generated Content... this is big and sometimes needs collapsing
      </div>
    </div>
  </div>
</div>

JS

//------------------------------
// Bootstrap Collapse.
//------------------------------
// Extend collapse to contain trigger and target within an enclosing section.
$('body').on('click.collapse-section.data-api', '[data-toggle=collapse-section]', function (e) {
  var thisTrigger = $(this);
  var sectionSelector = thisTrigger.data("section");
  var targetSelector = thisTrigger.data("target");
  var target = thisTrigger.closest(sectionSelector).find(targetSelector);
  target.data('bs.collapse') ? target.collapse('toggle') : target.collapse();
});