この要素以外のすべてを選択してください

Question

私はいくつかのアコーディオン設定をしています。 .not（）メソッドは私が望むものを達成すると思ったが、ただちに現在のdivを閉じるだけだった。ここで

は私が間違って行ってきたところ、誰でも見つけることができる場合、私が持っているものです：あなたは

JS

$(document).ajaxComplete(function() { 
$('.accordion-toggle').click(function(){ 

    //Expand or collapse this panel 
    $(this).next().stop().slideToggle('1000'); 
    $(this).toggleClass('active').siblings().removeClass('active'); 

    //Hide the other panels 
    $('.accordion-content').not(this).slideUp('1000'); 

}); 
}); 

HTML

<div id="location1"> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

</div> 



<div id="location2"> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3> 
<div class="accordion-content"> 
<p>List of products available here!</p> 
</div> 

</div> 

CSS

.accordion-content { 
    display: none; 
    padding:20px 0; 
    border-bottom: 1px solid #d4d5d7; 
} 

.accordion-content.default {display: block;} 

.accordion-toggle { 
    cursor: pointer; 
    font-size:18px; 
    padding:10px 0; 
    margin:0; 
    border-bottom:1px solid #d4d5d7; 
    position:relative; 
} 

Answer 1

あなたはかなり近くでした。あなたはこのラインにこれ​​に

$('.accordion-content').not(this).slideUp('1000'); 

を変更する必要があります。

$('.accordion-toggle').not(this).next().slideUp('1000'); 

あなたのクリック機能がaccordion-toggleクラスに適用されているので、あなたはthisがaccordion-toggleクラスの要素であるため、そのクラスをターゲットにする必要があり、そしてあなたが欲しいですではないのすべての要素を除外します。これにより、DOM内の次の要素をスライドさせたいので、.next()メソッドを使用する必要があります。

編集1：

#locationX div要素のすべてにわたってactiveクラスを除去するために、あなたは、この行にこの中へ

$(this).toggleClass('active').siblings().removeClass('active'); 

を分離する必要があります

$('.active').not(this).removeClass('active'); 
$(this).toggleClass('active'); 

前に書かれた通り、activeクラスがcuでトグルされた後それ以外のdivの要素には適切な影響を与えないすべての兄弟要素からそのクラスを削除するだけです。これはスクリプトを少し長くしますが、現在の要素のクラスを切り替える前にすべてのactiveクラスを削除します。

編集2：

全体の機能のための最も簡単な解決策は、おそらく次のようである：

$('.accordion-toggle').click(function(){ 

    //Expand or collapse this panel 
    $(this).next().stop().slideToggle('1000'); 

    //Hide the other panels 
    $('.accordion-toggle').not(this).removeClass('active').next().slideUp('1000'); 
    $(this).toggleClass('active'); 

}); 

Answer 2

ケースthis

$('.accordion-content').not(this).slideUp('1000'); 

は、すべてのアコーディオンコンテンツにマッチします：toggleないコンテンツが（それもそう、$(this)だけではなくthisでなければならないです。

あなたは試みることができる：注意点としては

var $content = $(this).next('.accordion-content'); 
$('.accordion-content').not($content).slideUp('1000'); 

、あなたが繰り返し比較的高価であるjQueryのオブジェクトを作成していないように私はあなたのハンドラの先頭でvar $this = $(this);を設定します。