0

各リンクの右側に右矢印を含む jQuery アコーディオン ボックスがあります。ユーザーがリンクをクリックすると、矢印が下向き矢印に変わり、コンテンツが展開されます。ユーザーが同じリンクをクリックすると、矢印が右矢印に戻り、コンテンツが非表示になります (典型的なアコーディオン スタイル)。矢印を切り替えるには、jQuery .on を使用し、span 要素のクラスを切り替えます。.off でイベントを削除しようとすると、すべてが正常に機能します。これが私のスクリプトです：

<script>
function handleClick(event) {
    $('#arrow').removeClass('icon-angle-right').addClass('icon-angle-down');
};

$('.panel-heading a').on('click', handleClick);
$('.panel-heading a').off('click', handleClick);
</script>

現在、何も機能していません。スパンよりも.off行を削除すると、クラスが切り替わりますが、再度クリックしても明らかに元に戻りません。

4

3 に答える 3

2

イベント ハンドラーのバインドを解除しても、目的は達成されません。クリック ハンドラーをバインドしてからすぐにバインドを解除するため、行をそのままにしておくと何も機能しません。クラスを変更するたびにハンドラーを実行する必要があります。ハンドラーは DOM を変更するものであり、それが必要です。アコーディオンの伸縮の両方でそれを行う。

toggleClass()達成しようとしていることが正常に実行されるため、off()行を削除して関数を次のように切り替えます。

function handleClick(event) {
    $('#arrow').toggleClass('icon-angle-right').toggleClass('icon-angle-down');
};

別のメモとして、そのアイテムの右に曲がった矢印を持つデフォルト状態があり、次に、openデフォルト状態をオーバーライドするトグルするクラスがあります。そうすれば、1 つのクラスだけを維持できます。しかし、それはアーキテクチャのつまらないものです。

于 2013-08-29T22:11:09.817 に答える
2

ハンドラーを再度削除しようとしている理由がわかりません。次のようなことをする方が理にかなっているでしょうか。

<script>

$('.panel-heading a').on('click', function() {
     if ($(this).hassClass('icon-angle-right') {
          $(this).removeClass('icon-angle-right').addClass('icon-angle-down');
     } else {
          $(this).addClass('icon-angle-right').removeClass('icon-angle-down');
     }
});
</script>

それとも私は質問を誤解していますか？

于 2013-08-29T22:12:20.283 に答える
0

.on() はイベントをバインドし、.off() はバインドを解除します。http://api.jquery.com/off/を参照してください。

于 2013-08-29T22:38:24.093 に答える