Question

我做了一些菜单，当用户点击它们时，这些菜单会扩展。每当菜单项被展开时，项目的标题都应该使用.css（）

来改变样式

由于菜单的样式不同，脚本中会有一个if语句，用于检查用户是否单击了menu2或menu3项以在展开时应用相应的样式。

编辑：问题是样式更改不适用。

我将$ this替换为$（this），正如Sushanth建议的那样，但问题仍然存在，请查看示例（更新）

代码：

<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");
                }
            );
        }



    });
});

}）;

Answer 1

$this

应该是 // In the if statements if( $this.is("menu2 .headline a"))

$(this)

或缓存 var $this = $(this)

<强>更新

我发现代码还有两个问题......

此行中缺少＃符号if( $(this).is("#menu2 .headline a")) 第二个问题在于您分配 CSS属性。。

.css（“background-color”，“＃009e0f”，“border”，“solid 2px＃f7b50c”）

你有多个属性..所以属性应该是a map的形式，其中键：值对..

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

<强> Check Fiddle

无需在$(window).load()和DOM 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);
    });
});

<强> Updated Fiddle

在if语句中使用jQuery更改css属性

1 个答案: