jQuery toggleClass不能在第二個div上工作

我想抱歉我的壞英語becouse我是意大利人。我有2個頁面的html與2個jQuery slideToggle和相應的toggleClass用於更改按鈕中的「顯示」和「隱藏」。在第一個div toggleClass正常工作，但在第二個div toggleClass不起作用。請閱讀我的代碼。jQuery toggleClass不能在第二個div上工作

<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>

我該怎麼辦？

來源

2013-02-16 Francesco Mineo

似乎爲我工作 - > [** FIDDLE **]（http://jsfiddle.net/6GB8y/）??? – adeneo 2013-02-16 13:50:00

我假設你想要第二個元素的行爲方式與第一個相同。如果這是正確的，你需要給你的第二個元素的點擊通話更改爲：

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

jsFiddle here。你還需要確保你的CSS沒有被覆蓋。如果這不是你想要的，請詳細說明你的問題...

來源

2013-02-16 13:47:58 hohner

我已經解決了修改CSS和類菜單。我已經將class =「menu」修改爲id =「menu_」並將CSS修改爲＃menu_.active {background：url（down.png）; } 感謝所有。 – 2013-02-16 13:55:55

jQuery toggleClass不能在第二個div上工作

回答

相關問題