0

私のデモでは、基本的な jQuery アコーディオンが動作しています。[About Us] をクリックすると、その下に [Team] リンクが表示されます。わーい！

さて、ハイパーリンクに「アイテム」クラスを持たなくても、このアコーディオンを機能させることは可能ですか?

代わりに、<a href="/about-us/" class="item">About Us</a>単に<a href="/about-us/">About Us</a>? 私が尋ねる理由は、WordPress から現在生成されているコードに「item」クラスが含まれていないため、アコーディオンが壊れてしまうからです。

これが私のデモです: http://jsfiddle.net/h32dj/

そして私のJavaScript：

jQuery(function($) {

    $('#accordion a.item').click(function (e) {
    //remove all the "Over" class, so that the arrow reset to default
    $('#accordion a.item').not(this).each(function () {
    if ($(this).attr('rel')!='') {
    $(this).removeClass($(this).attr('rel') + 'Over');
    }
    $(this).siblings('ul').slideUp("slow");
    });

    //showhide the selected submenu
    $(this).siblings('ul').slideToggle("slow");

    //addremove Over class, so that the arrow pointing downup
    $(this).toggleClass($(this).attr('rel') + 'Over');
    e.preventDefault();
    });

});

ここでのポインタに感謝します:)

4

2 に答える 2

1

itemでは、このスクリプトでクラスがどのように使用されているかを分析してみましょう。私が見る限り、第1レベルのアンカー（アコーディオンペイン）と第2レベルのアンカー（コンテンツ）を何らかの形で区別する必要があります。このクラスを削除する必要がある場合は、他の方法が必要です。たとえば、マークアップとタグの階層に依存できます。具体的には、クラスごとのセレクターの代わりに：

'#accordion a.item'

階層ごとにセレクターを使用します。

'#accordion > li > a'

これがデモです。

于 2013-03-05T11:06:17.677 に答える
0

アイテム クラスがなければ、次のように機能します。

    jQuery(function($) {

    $('#accordion > li > a').click(function (e) {
    //remove all the "Over" class, so that the arrow reset to default
        $('#accordion a').not(this).each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }
        $(this).siblings('ul').slideUp("slow");
    });

    //showhide the selected submenu
    $(this).siblings('ul').slideToggle("slow");

    //addremove Over class, so that the arrow pointing downup
    $(this).toggleClass($(this).attr('rel') + 'Over');
        e.preventDefault();
    });

});

jsfiddle へのリンク

于 2013-03-05T11:08:06.927 に答える