0

. 有多个 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 使用类“collapse”。必须添加此类。 $(document).on('click', '.spoiler-btn', function (){...})- 快速的方式听点击。在这种情况下可能不值得额外的代码，因为我们必须创建一个闭包来保存它。click 事件很少发生（或者如果用户选择不与手风琴交互，则永远不会发生）。

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

谢谢

4

1 回答 1

1

首先，看起来您的 html 存在一些语法问题——在设置扰流体类时，您缺少右引号。您还需要将 'in' 类添加到扰流板 bYou're 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);

这是一个工作示例。

于 2013-09-11T20:43:30.050 回答