Question

我有一个手风琴菜单，背景图片和标题颜色（菜单标签）在悬停和点击时发生变化。当菜单选项卡打开时（即，图像/颜色指示哪个菜单打开），我也希望如此。现在，只要光标不在菜单标题上，就会删除背景图像并且颜色将恢复为非活动状态。我在本网站和其他地方的所有研究都指向使用removeClass和addClass方法，但我无法使其工作。

JQuery的：

$(document).ready(function(){
    var panel = $("#accordian h3");
    panel.click(function(){
        //slide up all the link lists
        $("#accordian ul ul").slideUp();
        //slide down the link list below the h3 clicked, if it's closed
        if(!$(this).next().is(":visible"))
            $(this).next().slideDown();
        panel.removeClass('active')
        panel.addClass('active')
    });
})

相关CSS（减去UL规格）：

/*main menu heading style*/
#accordian h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0px 0px 0px 5px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #984e06;
    background: linear-gradient(#984e06, #FF9600);
}
/*heading hover effect, active (as clicked) effect*/
#accordian h3:hover,
#accordian h3:active {
    text-shadow: 0 0 2px rgba(0, 0, 0, 1.0);
    background-repeat: no-repeat;
    background-image: url(../Images/Logo.jpg);
    background-size: 25px 25px;
    background-position: 5px 4px; /*left center;*/
    padding: 0px 35px;
    background-color: #ffdf05; /*linear-gradient(#ffdf05, #FF9600);*/
}

我花了好几个小时试图找到解决方案。 removeClass和addClass方法是否正确？并在代码中的正确位置？我也尝试使用toggleClass方法用一行替换这两行，但这也不起作用。谢谢你的帮助。

Answer 1

我删除了一些代码，但我已经改变了一些代码我相信这就是你的意思：

$(document).ready(function(){ 

    $('#accordian ul').hide();

    $("#accordian h3").click(function(){

        $("#accordian ul").slideUp();
          //type here the css that you want if it's NOT clicked            
          $('#accordian h3').css({
              'background-color' : '#984e06', 
              'background-position': '5px 4px'
          });

        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
            //type here the css that you want if it's clicked            
            $(this).css({
                'background-color' : '#ffdf05', 
                'background-position': '5px 4px'
            });

        }

    });

});

实施例：{
{3}}

在第9行编辑：我没有使用$（this），而是将其更改为$（'＃accordian h3'），因此所有h3都将恢复而不是您想要点击的那个

如果您有更多问题，请与我们联系

手风琴菜单addclass不工作

1 个答案: