Question

我有一个如下所示的标记：

<div class="accordion is-open">
    <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
    <div class="accordion-content"></div>
</div>

<div class="accordion is-open">
    <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
    <div class="accordion-content"></div>
</div> 

<div class="accordion">
    <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
    <div class="accordion-content"></div>
</div>

我想要做的是在课程.is-opened

时使用jquery向课程div添加或删除课程.accordion至.accordion-header

我的问题是，某些divs已经包含了.is-opened个类，而有些则没有。{0}}。我需要能够单击并打开（仅添加类.is-opened）仅被点击的特定div。

这是我的jQuery：

function accordionOpener(obj) {
    var accordionHeader = obj.find('.accordion-header');
    var accordionBody = obj.find('.accordion');
    accordionHeader.on('click',function(){
        $(accordionBody).toggleClass('is-open');
    });
}
new accordionOpener($(this));

我不是jQuery中的大家伙，JavaScript所以请跟我说话，好像我已经10岁了。

Answer 1

你的逻辑不太正确。要解决此问题，请将click事件处理程序直接附加到.accordion-header类。从那里，您可以使用DOM遍历来查找相关的.accordion元素并切换类。试试这个：

$(function() {
  $('.accordion-header').click(function() {
    $(this).closest('.accordion').toggleClass('is-open');
  });
});

.is-open { color: #C00; } /* this is only to see the class being added/removed */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion is-open">
  <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
  <div class="accordion-content"></div>
</div>

<div class="accordion is-open">
  <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
  <div class="accordion-content"></div>
</div>

<div class="accordion">
  <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
  <div class="accordion-content"></div>
</div>

Answer 2

您可以简单地使用jQuery UI Accordion插件：https://jqueryui.com/accordion/ 只需将所有元素包装在div中，然后将标题更改为h3标记即可。您可以像下面这样调用插件：

$('.accordion').accordion();

此插件还提供键盘访问和一些其他辅助功能。

Answer 3

这是一种仅在开放式手风琴上保持的方法。

$('.accordion').click(function(){
  $('.accordion').removeClass('is-open');
  $('.show').removeClass('show');
  $(this).addClass('is-open');
  $('.accordion-content', this).addClass('show')
})

在CSS中，您需要指定.show类并隐藏所有其他面板。我还添加了一个光标，只是为了它。：）

.accordion {
  cursor: pointer;
}

.accordion-content {
  display:none;
}

.show {
  display: initial;
}

单击添加或从div中删除类

3 个答案: