0

ユーザーがクリックすると展開するアイテムを含むメニューをいくつか作成しました。メニュー項目が展開されるたびに、項目の見出しは.css（）を使用してスタイルを変更することになっています。

メニューのスタイルが異なるため、スクリプト内にifステートメントがあり、ユーザーがmenu2またはmenu3の項目をクリックして、展開時に適切なスタイルを適用したかどうかを確認します。

編集：問題は、スタイルの変更が適切に適用されないことです。

Sushanthが提案したように、$ thisを$（this）に置き換えましたが、問題は解決しません。例を確認してください（更新）

コード：

<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {

    $(".toggle-trigger").click(function() {
        $(this).parent().nextAll('.toggle-wrap').first().slideToggle('slow','swing'); 


      if( $(this).is("menu2 .headline a")) {
            $(this).toggle(
                function(){
                $(this).parent().css("background-color","rgba(0, 0, 0, 0.1)",'border', 'solid 2px #009e0f');
                $(this).css("color","#009e0f");
                },
                function(){
                $(this).parent().css("background-color","#009e0f","border",'solid 2px #009e0f');
                $(this).css("color","#ffffff");
                }
            );
        }

        else if( $(this).is("#menu3 .headline a")) {
            $(this).toggle(
                function(){
                $(this).parent().css("background-color","rgba(0, 0, 0, 0.1)",'border', 'solid 2px #f7b50c');
                $(this).css("color","#f7b50c");
                },
                function(){
                $(this).parent().css("background-color","#009e0f","border",'solid 2px #f7b50c');
                $(this).css("color","#ffffff");
                }
            );
        }



    });
});

}）;

4

1 に答える 1

0 
$this

// _ In the if statements if( $this.is("menu2 .headline a")) 

$(this)

またはキャッシュ var $this = $(this)

アップデート

コードにさらに2つの問題があります...

  • この行に＃記号がありません2番目の問題は、 CSSプロパティif( $(this).is("#menu2 .headline a")) を割り当てる方法にあります。。

    .css（ "background-color"、 "＃009e0f"、 "border"、'solid 2px＃f7b50c'）

複数のプロパティがあります..したがって、プロパティはw​​ith key：valueペアa mapの形式であると想定されます。

.css({
       "background-color": "#009e0f",
       "border": 'solid 2px #f7b50c'
 });

フィドルをチェック

コードをとの両方に含める必要はありません$(window).load()。1DOM Ready handlerつで十分です。また、切り替えに問題があるようです

アップデート

トグルを使用せずに最適化

$(document).ready(function() {
    $(".toggle-trigger").click(function() {
        // cache the div next to anchor
        var $div = $(this).parent().nextAll('.toggle-wrap').first();
        $div.slideToggle('slow', 'swing');
        // cache $(this)
        var $this = $(this);
        var background = '';
        var color = '';
        // Checking id the div has no class called hidden
        if (!$div.hasClass('hidden')) {
            // then add the class to the div
            $div.addClass('hidden');
            background = "rgba(0, 0, 0, 0.1)";
            // closest ancestor of the link cliked is menu2
            if ($this.closest('#menu2').length) {
                color = "#009e0f";
            }
            // closest ancestor of the link cliked is menu2
            else if ($this.closest('#menu3').length) {
                color = "#f7b50c";
            }
        }
        // if the div has a class hidden then 
        else {
            // Remove the hidden class
            $div.removeClass('hidden');
            color = "#ffffff";
            if ($this.closest('#menu2').length) {
                background = "#009e0f";
            }
            else if ($this.closest('#menu3').length) {
                background = "#f7b50c";
            }
        }
        // set the background  and color based on conditions
        $this.parent().css("background-color" , background );
        $this.css("color" , color);
    });
});​

更新されたフィドル

于 2012-11-15T17:19:34.863 に答える