jQuery隱藏/顯示2菜單

我遇到以下問題：我有一個產品的菜單和另一個產品的另一個菜單。它是這樣的：

Product1 |產品2

主頁選項1選項2選項3 | Option1 Option2 Option3

其中前3個選項用於Product1，後3個選項用於Product2。我只需要看一個產品的菜單。

我的HTML是這樣的不便（簡化當然）：

<div class="products"> 
<a href="#" id="product1">Product1</a> 
<a href="#" id="product2">Product2</a> 
</div> 
<ul id="menu1"> 
<li>Option1</li> 
<li>Option2</li> 
<li>Option3</li> 
</ul> 
<ul id="menu2"> 
<li>Option1</li> 
<li>Option2</li> 
<li>Option3</li> 
</ul>

和jQuery去水木清華這樣的：

$(document).ready(function() { 
    $("#product1").addClass("active"); 
    $("#menu2").hide(); 

    $("#product2").click(function() { 
     $("#menu1").hide(); 
     $("#menu2").show(); 
     $("#product1").removeClass("active"); 
     $("#product2").addClass("active"); 
    }); 
    $("#product1").click(function() { 
     $("#menu2").hide(); 
     $("#menu1").show(); 
     $("#product2").removeClass("active"); 
     $("#product1").addClass("active"); 
    }); 
});

問題：當我第一次加載網頁一切正常。當我在＃產品2單擊例如，它是在函數中指定的一切：

$("#product2").click(function() { 
     $("#menu1").hide(); 
     $("#menu2").show(); 
     $("#product1").removeClass("active"); 
     $("#product2").addClass("active"); 
    });

，但它也執行了前兩行：

$("#product1").addClass("active"); 
    $("#menu2").hide();

而且我同時獲得＃產品1和＃產品2處於活動狀態並且兩個菜單都隱藏有任何想法嗎？在此先感謝！

來源

2013-08-01 user2642287

看起來你的工作爲例精... http://jsfiddle.net/d7DrG/ – Okazari

它上的jsfiddle，但它在我的web項目不一樣。可能我應該提到它在ASP.NET Web Forms項目中。這種行爲對我來說也很奇怪，但是我找不到它背後的原因。 – user2642287

你可以嘗試debbuging與一些中斷點，一步一步看你的代碼在點擊後去哪裏？這段代碼非常簡單，錯誤仍然很奇怪。 – Okazari

您應該通過返回false來防止點擊事件的默認操作。這樣，你的頁面將不會被重新加載。

像這樣的東西應該做的伎倆：

$(document).ready(function() { 
    $("#product1").addClass("active"); 
    $("#menu2").hide(); 

    $("#product2").click(function() { 
     $("#menu1").hide(); 
     $("#menu2").show(); 
     $("#product1").removeClass("active"); 
     $("#product2").addClass("active"); 
     return false; 
    }); 
    $("#product1").click(function() { 
     $("#menu2").hide(); 
     $("#menu1").show(); 
     $("#product2").removeClass("active"); 
     $("#product1").addClass("active"); 
     return false; 
    }); 
});

來源

2013-08-01 14:15:26

導航到'＃'時不會重新載入頁面。 –

它不應該重新載入，但是如果返回false，則一切正常。謝謝！ – user2642287

簡短的回答：您需要添加return false到您的功能。

額外的信息：

在腳本的開始，你有以下：

$("#product1").addClass("active"); 
$("#menu2").hide();

我會傾向於分配在HTML或CSS某處這些特性，使product1有active類等

最後，你有沒有考慮過只是使用jQuery Accordion或Tabstrip組件？

http://jqueryui.com/accordion/

來源

2013-08-01 14:18:48

謝謝！返回假是我正在尋找。 – user2642287

聰明人的話：WebForms不像這樣適應客戶端腳本。它試圖通過ViewState抓取每個點擊，按鍵等。討厭的東西。 –

jQuery隱藏/顯示2菜單

回答

相關問題