。不（此）不工作？

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

。不（此）不工作？

回答

相關問題