Question

。有一个以上的div用于折叠某个没有ID的类：

<div class="spoiler">
    <div class="spoiler-btn">spoiler1</div>
    <div class="spoiler-body collapse">spoiler 1</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler2</div>
    <div class="spoiler-body collapse">spoiler 2</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler3</div>
    <div class="spoiler-body collapse">spoiler 3</div>
</div>

在.spoiler-btn插件中使用data-attribute data-toggle =“collapse”data-target =“。spoiler-body”折叠所有div。但是只需要在父.spoiler

中折叠

更新

我找到了正确的方法：

$.fn.ready(function() {
    // Spoiler
    $(document).on('click', '.spoiler-btn', function (e) {
        e.preventDefault()
        $(this).parent().children('.spoiler-body').collapse('toggle')
    });
});

Bootsprap collapse.js使用“崩溃”类。必须添加此类。 $(document).on('click', '.spoiler-btn', function (){...}) - 快速收听点击。在这种情况下可能不值得额外的代码，因为我们必须创建一个闭包来保存它。点击事件不经常发生（或者如果用户选择不与手风琴互动则永远不会发生）。

演示：http://jsfiddle.net/vralle/qX4Pt/

由于

Answer 1

首先看起来你的html有一些语法问题 - 当你设置剧透体类时，你会错过关闭引号。您还需要将“in”类添加到剧透b中，您的HTML应该如下所示。

<强> HTML

<div class="spoiler">
    <div class="spoiler-btn">spoiler1</div>
    <div class="spoiler-body in">spoiler 1</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler2</div>
    <div class="spoiler-body in">spoiler 2</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler3</div>
    <div class="spoiler-body in">spoiler 3</div>
</div>

接下来，您需要修改javascript以稍微清理jQuery语法，然后实现折叠功能，而不是使用上面描述的数据属性。我还将你的代码包装在一个封闭中以便进行测量。

<强> JS

(function ($) {
  $(function () {
    var $spoilers = $('.spoiler'), 
    $spoilerBodies = $('.spoiler-body');

    $spoilerBodies.collapse();

    $spoilers.on('click', function() {
      var $target = $(this).find('.spoiler-body');
      $target.collapse('toggle');
    });
  });
})(jQuery);

Here's a working example

Bootstrap Collapse - 每个div由某个类？

更新

1 个答案: