1

フィドル

「ブロック」のクラスを切り替えるこの基本的なアコーディオンがあります。.not(this)inが機能していないことを除いて、すべてが機能している$('.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');
 });
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');
});

したがって、anaccordionHeadingをクリックすると、次に発生するanが検出されaccordionInner、クラスが切り替えられてblock拡張または縮小がトリガーされます。

オプションで、jQuery .toggle（）メソッドを使用して、カスタムクラスなしで表示/非表示を実行することもできます。

于 2013-03-21T17:36:34.143 に答える