0

たくさんのトグルを含むメニューがあります。各アイテムは異なるものを切り替えます。

いくつかのものをデフォルト設定にリセットする全体的な「リセット」ボタンを作成しようとしています。メニュー項目が切り替えられているかどうかを検出する必要があります。切り替えられている場合は、その特定の項目に対して何らかのコードを実行し、そうでない場合は何もしません。項目をオンにすると、CSS の背景色が表示されるので、次のリセット コードを作成しました。

$('#app-menu ul.dynamic-items li ul li').toggle(function () {
    $(this).css({background: "#4c581e"});
}, function () {
    $(this).css({background: "none"});
});

/* Reset Button */

$(".reset").click(function() {
    if( $('#app-menu ul.dynamic-items li').css({background: "#4c581e"}) != null )  { 
        $(this).click(); /* If the item has the background code mentioned above, it is toggled on, therefore this "click" should reset its state */
    } 
    else { 
    // do nothing //
    };
});

基本的に、メニュー項目の背景が #4c581e の場合、それはオンになっていることを意味するため、もう一度オフにするには「クリック」する必要があると言いたいのです。

問題は、それが機能していないことです。私はjQueryにかなり慣れていないので、何か間違ったことをしていると思いました。

アイデアはありますか？

編集:メニュー項目は実際にページ上の DIV 要素を切り替えるため、メニュー項目の css スタイルをリセットするだけの問題ではないことに注意してください。これが、特定の CSS プロパティが検出された場合にアイテムを「クリック」しようとした理由です。これは、「クリック」すると基本的に再びオフに切り替わるためです。

4

1 に答える 1

2

1.

$(this).css("background-color")は値を返しますが、おそらく RGB 値になります。

=> RGB(255, 255, 255)

したがって、RGB 値を比較するか、何らかの変換ツールを使用してください。

http://www.jquery4u.com/jquery-functions/jquery-convert-rgb-hex-color/

2.

CSS クラスを使用して、クラスを切り替えたいだけかもしれません。「リセット」ボタンは、すべてのデフォルト クラスを要素に再適用できます。これは、IMO よりクリーンです。

$('#app-menu ul.dynamic-items li ul li').toggle(function () {
    $(this).toggleClass("active");
});
$(".reset").click(function() {
    $('#app-menu ul.dynamic-items li ul li').removeClass("active");
});

css は次のようになります。

li.active {
  background-color: #4c581e;
  display: block;
}
于 2012-12-06T02:22:52.253 に答える