Javascript下拉菜單onclick，（關閉其他人，當一個是打開的）

我創建了響應式網站的下拉菜單。但我有一個小問題。當我點擊第一個菜單標籤時，所有標籤打開。Javascript下拉菜單onclick，（關閉其他人，當一個是打開的）

DEMO:https://jsfiddle.net/vth4gn6w/2/

我想要什麼：

當我點擊第一個選項卡上，我想只有標籤頁中打開，沒有它激活其他選項卡。
當我點擊第二個選項卡時，我想讓第一個選項卡自動關閉。

希望有人能幫助我，並且請用小提琴向我展示它是如何完成的。謝謝

來源

2016-10-24 Bel

這將有助於包括代碼作爲你的問題的一個片段。 – darrylyeo

哪個元素被點擊？不是整個#nav-mobile，而是a裏面。你想要#nav-mobile a作爲你的選擇。

現在，ul s在哪裏與它們對應的a（簡稱$(this)裏面的回調函數）有關？他們是直系兄弟姐妹，所以$(this).next('ul')是你最好的選擇。

要關閉所有其他菜單項，請將ul保存在變量中，並使用.not()選擇其他ul s。

您的代碼現在應該看起來像這樣。

$(document).ready(function() { 
 
    $('#nav-mobile ul').hide(); 
 
    $('#nav-mobile a').click(function(e) { 
 
     e.preventDefault(); 
 
     var $menuItem = $(this).next('ul'); 
 
     $menuItem.slideToggle(); 
 
     $('#nav-mobile ul').not($menuItem).slideUp(); 
 
    }); 
 
});

#tab1, #tab2, #tab3{ 
 
    background-color:grey; 
 
    color:white; 
 
    padding:5px 10px; 
 
    display:block; 
 
    width:100px; 
 
    border-bottom:1px solid; 
 
} 
 

 
#tab1:hover, #tab2:hover, #tab3:hover{ 
 
    background-color:darkgrey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav-mobile"> 
 
    <a href="#" id="tab1">Products</a> 
 
    <ul style="display: none;"> 
 
     <li><a href="index.php">Home</a></li> 
 
     <li><a href="#">Why Us</a></li> 
 
     <li><a href="#">Our Work</a></li> 
 
    </ul> 
 
    <a href="#" id="tab2">About</a> 
 
    <ul style="display: none;"> 
 
     <li><a href="#">Our Equipment</a></li> 
 
     <li><a href="#">Video Production</a></li> 
 
    </ul> 
 
    <a href="#" id="tab3">Contact</a> 
 
    <ul style="display: none;"> 
 
     <li id="last-child"><a href="#">Contact</a></li> 
 
     <li id="last-child"><a href="#">Social Media</a></li> 
 
    </ul> 
 

 
</div>

來源

2016-10-24 20:41:07 darrylyeo

謝謝。有用。但是，當我嘗試再次關閉其中一個選項卡時，它會自動打開。你知道如何解決這個問題嗎？ @darrylyeo – Bel

編輯我的答案。 – darrylyeo

哇的人。你是最棒的！！謝謝sooo soo bro – Bel

您需要修復您的js，因此它不會滑動切換整個導航對象。

https://jsfiddle.net/vth4gn6w/2/#&togetherjs=0vaEOk1NNT

$(document).ready(function() { 

    $('#nav-mobile ul').hide(); 
    $('#tab1').click(function(e) { 
     e.preventDefault(); 
     $('#tab1ul').slideToggle(); 
    }); 

});

我設置你的例子爲TAB1所以當你點擊第一個選項卡只有我創建的ID tab1ul擴展菜單。你可以按照這個指導來完成你想要的功能。

來源

2016-10-24 20:22:49

Javascript下拉菜單onclick，（關閉其他人，當一個是打開的）

回答

相關問題