導航菜單JQuery問題

Question

我有兩個問題：

1. 關於“檢測到的” css類，如果在顯示元素下拉列表內容的動畫完成之前單擊另一個列表元素，則會出現該元素的下拉列表內容，但是，錯誤的列表元素將突出顯示。 這是我嘗試創建所謂的“活動”類以闡明要顯示哪個列表元素的下拉內容的嘗試。 如何確保無論突出顯示/選擇了哪個列表元素，都會顯示正確的下拉內容？
2. 在初始加載頁面或刷新時，盡管用戶尚未選擇列表元素及其下拉內容，但突出顯示並顯示了該列表元素。 如何確保在加載頁面時，在單擊列表元素之前不顯示任何列表元素或其下拉內容？

謝謝。

 $(function() { $('#nav .nav-ul li').on('click', function () { //control selected nav li's css var $detected = $(this).closest('.nav-ul'); $detected.find('li.detected').removeClass('detected'); $(this).addClass('detected'); //figure out which rel to show var ulToShow = $(this).attr('rel'); //hide current rel $('.substitute .sub-child.active').hide(416, function() { $(this).removeClass('active'); $('#'+ulToShow).fadeIn(528, function() { $(this).addClass('active'); }); }); }); }); 

 * { margin: 0; padding: 0; } #nav { background-color: /*blue*/; float: right; } #nav .nav-ul { list-style: none; float: right; background-color: /*yellow*/; border-left: solid 2px #000000; border-right: solid 2px #000000; /*transform: skewX(-20deg);*/ } #nav .nav-ul li { float: left; padding: 4px; /*transform: skewX(20deg);*/ font-weight: bold; color: #000000; } #nav .nav-ul li:hover { cursor: pointer; text-decoration: underline; color: #E51D27; } #nav .nav-ul li.detected { color: #E51D27; } #nav .substitute { float: right; background-color: /*pink*/; margin-right: 4px; } #nav .substitute .sub-child { float: left; display: none; } #nav .substitute .sub-child.active { display: block; } #nav .substitute .sub-child ul { list-style: none; } #nav .substitute .sub-child ul li { float: left; padding: 4px; } 

 <div id="nav"> <ul class="nav-ul"> <li class="detected" rel="pay1">Color</li> <li rel="pay2">Shape</li> <li rel="pay3">Size</li> </ul> <div class="substitute"> <div id="pay1" class="sub-child active"> <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul> </div> <div id="pay2" class="sub-child"> <ul> <li>Square</li> <li>Circle</li> <li>Triangle</li> <li>Diamond</li> </ul> </div> <div id="pay3" class="sub-child"> <ul> <li>Small</li> <li>Medium</li> <li>Large</li> </ul> </div> </div> </div> 

Answer 1

可能有很多方法可以做到這一點。 我選擇了JQuery方式，因為您已經在使用它。 對於第一個問題，我只是在動畫工作時刪除了鏈接上的單擊處理程序，然后在動畫完成后將其添加回去。 這樣，動畫運行時不會產生中間點擊的影響。 可能還有其他方法可以實現，但這就是我在運行動畫時通常用來啟用/禁用項目的概念。

對於第二個問題，我從初始DOM中刪除了active類和detected類，並添加了邏輯以檢查是否沒有活動，然后僅運行淡入動畫，否則同時運行淡出和淡入。

代碼中有些重復，因此我建議創建函數並對其進行重構，但這應該可以給您帶來啟發。

似乎工作正常。 在這里更新小提琴： https ： //jsfiddle.net/bm7qoe3k/1/

希望這可以幫助。