使用jQuery存在多個隱藏/顯示DIV的問題

我目前正在爲網站創建一個頁面，在那裏會有一個垂直導航欄，並且當點擊所述導航欄上的菜單項/子菜單項時，不同的DIV將會隱藏/透露，顯示和隱藏不同的產品。使用jQuery存在多個隱藏/顯示DIV的問題

到目前爲止，我已經獲得了主菜單項的顯示/隱藏功能，以便點擊它們。

例如：我點擊菜單頂部的「第一項」鏈接，導航欄旁邊出現一張First Item圖像。然後，我點擊「第二個菜單項」，第一個圖像消失，第二個圖像出現，等等。

但是，我遇到一些麻煩的原因是，當我點擊其中一個子菜單項，它的圖像顯示出來，但我無法獲得相應的主菜單項的圖像消失。

下面是主菜單/子菜單的問題代碼：

HTML

<ul class="accordion"> 
    <li class="item1"> 
     <a href="#">Product Category 1</a> 
     <ul> 
      <li class="sub1"><a href="#">Sub 1 </a></li> 
     </ul> 
    </li> 
</ul> 

<!---HIDDEN DIVS---> 

<div id='hidden_div' > 
    <img src="images/item1.png"/> 
</div> 
<div id='hidden_div2' > 
    <img src="images/item1.png"/> 
</div>

JQUERY顯示和隱藏

我不知道如果導航欄的Javascript是問題，但唯一的JavaScript文件連接到這個網頁是最小化...說這個詞，我可以發佈代碼。我不知道，我迷路了。

來源

2013-05-09 KateG

其實，剛纔意識到，以」 .sub1" 所對應的照片一旦我要麼選擇它不要走開。即使當我點擊一個不對應的/養育主菜單項後。 – KateG 2013-05-09 18:45:18

您的問題在於.sub1位於.item1之內，所以當您點擊.sub1時，您還可以點擊.item1。

這就是所謂的事件冒泡。要停止，只需使用stopPropagation您.sub1點擊這樣的：

$('.sub1').click(function(e) { 
    e.stopPropagation(); 
    $('#hidden_div2').show(); 
    $('#hidden_div').hide(); 
});

如果你不想使用stopPropagation你也可以只選擇你改變$('.item1>a)和$('.sub1>a')。

來源

2013-05-09 18:48:08

工作完美！非常感謝。我會投票贊成，但顯然我還沒有足夠的聲譽或什麼哈哈 – KateG 2013-05-09 18:55:29

這是你的HTML實際上是搞砸了。產品1的延伸標籤<li>延伸至產品2的上方。這就是爲什麼您的點擊始終在第一位運行。

http://jsfiddle.net/6wE52/

來源

2013-05-09 18:49:43 DMortensen

使用jQuery存在多個隱藏/顯示DIV的問題

回答

相關問題