jQuery toggleClass 在第二个 div 上不起作用答案

【问题标题】：jQuery toggleClass don't working on second divjQuery toggleClass 在第二个 div 上不起作用
【发布时间】：2013-02-01 09:11:31
【问题描述】：

我很抱歉我的英语不好，因为我是意大利人。我有 1 页 html 和 2 个 jQuery slideToggle 以及用于更改按钮中的“显示”和“隐藏”的相关切换类。在第一个 div toggleClass 中正常工作，但在第二个 div toggleClass 中无法正常工作。请阅读我的代码。

<html> 
<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#panel").show(); 
    $(".show_hide").click(function(){ 
        $("#panel").slideToggle("slow"); 
        $(this).toggleClass("lactive"); return false; 
    }); 
    $("#menu").show(); 
    $(".menu").click(function(){ 
        $("#menu").slideToggle("slow"); 
        $(".menu").toggleClass("active"); return false;
    }); 
}); 
</script> 
<style type="text/css" rel="stylesheet"> 
.sli { 
    margin: 0; 
    padding: 0; 
    background: url(btn-slide.gif) no-repeat center top; 
}     
.slide { 
    margin: 0; 
    padding: 0; 
    background: url(btn-slide.gif) no-repeat center top; 
} 
.show_hide { 
    background: url(up.png) no-repeat 120px 10px; 
    text-align: center; 
    width: 144px; 
    height: 31px; 
    padding: 10px 10px 0 0; 
    margin: 0 auto; 
    display: block; 
    font: bold 120%/100% Arial, Helvetica, sans-serif; 
    color: #fff; 
    text-decoration: none; 
} 
.active { 
    background: url(down.png) no-repeat 120px 10px; 
} 
.lactive { 
    background: url(down.png) no-repeat 120px 10px; 
} 
.menu { 
    background: url(up.png) no-repeat 120px 10px; 
    text-align: center; 
    width: 144px; 
    height: 31px; 
    padding: 10px 10px 0 0; 
    margin: 0 auto; 
    display: block; 
    font: bold 120%/100% Arial, Helvetica, sans-serif; 
    color: #fff; 
    text-decoration: none; 
} 
</style> 
</head> 
<body> 
<!-- primo FUNZIONANTE --> 
<p class="slide"> 
                  <a href="#" class="show_hide" style="text-decoration: none; "> 
                     Login 
                  </a> 
                </p> 
<div id="panel"> <!-- # Pannello nascondibile --> 
                              Testo qui 
                           </div> 

<hr> 

<!-- secondo NON FUNZIONANTE --> 
<p class="sli"><a href="#" class="menu" style="text-decoration: none; "> 
                         mos 
                          </a></p> 
            <div id="menu"> 
                menu 
            </div> 
            <hr>
</body>

我能做什么？

【问题讨论】：

似乎对我有用 -> FIDDLE ???

标签： jquery html slidetoggle toggleclass

【解决方案1】：

我假设您希望第二个元素的行为方式与第一个元素相同。如果这是正确的，您需要将第二个元素的点击调用更改为：

$(".menu").click(function(){ 
    $("#menu").slideToggle("slow"); 
    $(this).toggleClass("active");
});

jsFiddle here。您还需要确保您的 CSS 没有被覆盖。如果这不是您想要的，请详细说明您的问题...

【讨论】：

我已经解决了修改 CSS 和类菜单。我已将 class="menu" 修改为 id="menu_" 并将 CSS 修改为 #menu_.active { background: url(down.png); } 谢谢大家。