0

jqueryを使用してマルチレベルメニューを作成しています。特定のレベルのボタンをクリックすると、ボタンの色が変わり、クリックされたボタンの次の下位メニュー レベルが表示されます。

たとえば、「ポリシー」をクリックすると、「新しいポリシー」、「ポリシーの更新」、「ポリシーの支持」などが表示される場合があります。

「ポリシー」ボタンはレベル 1 で、他のボタンはレベル 2 です。別のレベル 1 ボタンをクリックすると、クリックされているボタンを除くすべてのボタンのボタン色クラスがオフ (削除) になります。このボタンでは、ボタンの色のクラスを切り替えます (ボタンがクリックされた場合、または 2 回目にクリックされた場合)。

1) レベル 2 のボタンをクリックすると、レベル 1 のボタンのカラー クラスがすべて削除されるという問題が発生します。そこで、さまざまなレベルのボタンに type="level01" と type="level02" を配置したいと思います。(ボタンと呼んでいますが、実際にはアンカータグです。)

これは、現在のボタンのカラー クラス以外をすべて削除するコードです。

// remove the menuA-open class from all class menuA objects except the one being toggled
$(".menuA[name!=" + $(this).text() +"]").removeClass("menuA-open");

ボタンのテキスト (アンカー タグの innerHTML) も name="" パラメータにあることに注意してください。

今、私は次のようなことを言いたいです:

($(".menuA[name!=" + $(this).text() +"]") and $("menu[type]==$(this)[type])).removeClass("menuA-open");

しかし、jqueryでこれら2つの条件を正しく「and」する方法を見つけることができません。

2) $(this) で text() 関数を使用します

$(".menuA[name!=" + $(this).text() +"]").removeClass("menuA-open");

これは、アンカー タグの innerHTML のテキストに小さなグラフィックが追加されているためです。したがって、これはテキストの長さが 19 文字未満の場合は問題なく機能しますが、そこからテストが失敗しますか??

誰でも助けてもらえますか？

クリス

4

1 に答える 1

0

さらなる更新:作業デモhttp://jsfiddle.net/Jb2jP/1/

$(document).ready(function() {
    $(".menuA").click(function(evnt) {

        evnt.preventDefault();

        $(".menuA").not(this).removeClass("menuA-open");

        // hide all other fieldset objects except the one being toggled
        $('fieldset').not($(this).next('fieldset')).hide();

        // toggle the fieldset following this link open or closed
        $(this).next('fieldset').toggle();

        // toggle the currently selected menuA-open class on or off
        $(this).toggleClass("menuA-open");
    });

    $("fieldset").mouseup(function() {
        return false;
    });
    $(document).mouseup(function(evnt) {
        // if user clicked anywhere outside our menus
        if ($(evnt.target).parent("a.menuA").length == 0) {
            // remove the menuA-open class from all class menuA objects
            $(".menuA").removeClass("menuA-open");
            // hide all fieldset objects
            $("fieldset").hide();
        }
    });
});​


更新:複数の attribute-(not)-equals セレクターをチェーンするには、単純にそれらを連結します ( jQuery docs を参照)。

$(".menuA[name='abc'][type='123']").removeClass("menuA-open");

ただし、特にあなたの場合、これはおそらくまだ必要ないでしょう:

var type = $(this).attr('type');
$(".menuA").not(this).filter("[type='"type"']").removeClass("menuA-open");

.not()選択が完了したら 、jquery フィルター メソッドを使用して、一致したセットから現在の要素を削除できます。

$(".menuA").not(this).removeClass("menuA-open");

それがその方法です。

試行を機能させる方法の例として（ただし、これはまったくお勧めしません）：

$(".menuA[name!='" + $(this).text() +"']").removeClass("menuA-open");

$(this).text()文字列にはスペースが含まれているため、文字列内のリテラル引用符で囲む必要があります。これが唯一の構文上の問題であるはずですが、ここでも.not()フィルターが最も安全で直感的な方法です。

于 2012-07-17T00:10:43.113 に答える