.не (это) не работает?

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, но событие щелчка было на accordionHeading, поэтому .not (this) никогда не сможет работать.

Решение в скрипкой:

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

Edit: Как уже упоминалось в комментариях, targetInner не должны быть обернуты в объект JQuery снова.

Answer 3

Поскольку ваши .accordionHeading и .accordionInner элементы являются братьями и сестрами (не являются родительскими: дочерние), вам не нужно использовать this на событиях щелчка заголовка.

Ваш Javascript в основном правильно, просто изменить его на:

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

Так что теперь, когда accordionHeading щелкает он найдет следующее вхождение в accordionInner и переключить block класс, чтобы вызвать расширение или сжатие.

Возможно, вы также можете использовать метод jQuery .toggle() для отображения/скрытия для вас без специального класса.