。不（此）不工作？

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

来源

2013-03-21 dezman

本次活动是在标题，所以this将永远不会有任何 “内部” 元素。

使用您获得在not也使用next参考：

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

来源

2013-03-21 17:31:55 Guffa

是啊......这很有意义，谢谢！ – dezman 2013-03-21 17:34:32

更新您的提琴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-21 17:35:01 cernunnos

'targetInner'是一个jQuery对象，因此您不需要执行'$（targetInner）'。 – Guffa 2013-03-21 18:15:40

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

你的JavaScript大多是正确的，只是将其更改为：

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

所以，现在当accordionHeading被点击的时候，会发现一个accordionInner下一个次数和切换block类触发膨胀或收缩。

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

来源

2013-03-21 17:36:34 STW

。不（此）不工作？

回答

相关问题