1

Fiddle

I've got this basic accordion which toggles a class of 'block'. Everything is working, except the .not(this) in $('.accordionInner').not(this).removeClass('block'); is not working, so you can never close all the accordions. I am sure it is a simple fix, but I don't know what I'm doing wrong.

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');
 });
4

3 回答 3

7

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

next使用您在其中使用的参考not：

$('body').on('click', '.accordionHeading', function(){
  var inner = $(this).next('.accordionInner');
  $('.accordionInner').not(inner).removeClass('block');
  inner.toggleClass('block');
});
于 2013-03-21T17:31:55.123 回答
2

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

问题出在这里：

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

您正在选择accordionInner，但点击事件是在accordionHeading 上，所以.not(this) 永远无法工作。

小提琴中的解决方案：

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

编辑：如评论中所述， targetInner 不需要再次包装在 jquery 对象中。

于 2013-03-21T17:35:01.270 回答
0

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

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

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

因此，现在当单击 an 时accordionHeading，它将找到下一次出现 anaccordionInner并切换block类以触发扩展或收缩。

或者，您也可以使用 jQuery .toggle()方法在没有自定义类的情况下为您执行显示/隐藏。

于 2013-03-21T17:36:34.143 回答