Question

Fiddle

我有这种基本的手风琴可以切换一类'块'。一切正常，除了 .not(this)中的$('.accordionInner').not(this).removeClass('block');无效，因此您永远无法关闭所有手风琴。我确信这是一个简单的修复，但我不知道我做错了什么。

HTML：

<div class="accordionHeading">
    <p>Header</p>
</div>
<div class="accordionInner">
    <p>Inner</p>
</div>
<div class="accordionHeading">
    <p>Header</p>
</div>
<div class="accordionInner">
    <p>Inner</p>
</div>

CSS：

.accordionHeading {
    cursor: pointer;
    background: yellow;
}
.accordionInner {
    display: none;
}
.block {
    display: block !important;
}

JS：

 $('body').on('click', '.accordionHeading', function(){
  $('.accordionInner').not(this).removeClass('block');
  $(this).next('.accordionInner').toggleClass('block');
 });

Answer 1

事件在标题上，因此this永远不会是任何“内在”元素。

使用next中not使用的引用：

$('body').on('click', '.accordionHeading', function(){
  var inner = $(this).next('.accordionInner');
  $('.accordionInner').not(inner).removeClass('block');
  inner.toggleClass('block');
});

Answer 2

更新了您的小提琴http://jsfiddle.net/tnXxF/4/

问题在于：

$('.accordionInner').not(this).removeClass('block');

你选择的是accordionInner，但是click事件是在accordionHeading上的，所以.not（this）永远不会工作。

小提琴解决方案：

$('body').on('click', '.accordionHeading', function(){
  var targetInner = $(this).next('.accordionInner');
  $('.accordionInner').not(targetInner).removeClass('block');
  targetInner.toggleClass('block');
});

编辑：正如注释中所提到的，targetInner不需要再次包装在jquery对象中。

Answer 3

由于您的.accordionHeading和.accordionInner元素是兄弟（不是父级：子级），因此您不需要在标题的点击事件中使用this。

您的Javascript大部分都是正确的，只需将其更改为：

$('body').on('click', '.accordionHeading', function(){
  $(this).next('.accordionInner').toggleClass('block');
});

现在，当点击accordionHeading时，它会找到accordionInner的下一个出现并切换block类以触发扩展或收缩。

除此之外，您还可以使用jQuery .toggle()方法为您进行显示/隐藏，而无需自定义类。

.not（这）不工作？

3 个答案: