Javascriptドロップダウンメニューonclick（他のものを開いているときに閉じる）

Question

レスポンシブウェブサイトのドロップダウンメニューを作成しました。 しかし、私は小さな問題があります。最初のメニュータブをクリックすると、すべてのタブが開きます。私が欲しいもの

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

：私は最初のタブをクリックすると

1. は、私は、そのタブが、それは他のタブをアクティブにせずに、開きたいです。
2. 2番目のタブをクリックすると、最初のタブを自動的に閉じることができます。

誰かが私を助けてくれることを願っています。そして、PLZはフィドルを使ってそれがどのように行われたかを示します。ありがとう

Answer 1

どの要素がクリックされていますか？ #nav-mobileではなく、aが内部にあります。セレクタとして#nav-mobile aが必要です。

ここで、a（コールバック関数内の$(this)と呼ばれます）に関連してulがありますか？彼らは即時の兄弟ですので、$(this).next('ul')が最善の策です。

他のすべてのメニュー項目を閉じるには、ulを変数に保存し、.not()を使用してもう1つのulを選択します。

コードは次のようになります。

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

Answer 2

jsを修正する必要があるので、navオブジェクト全体を切り替えることはありません。

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が広がる作成しただけのメニューをクリックしてください。これを参考にして機能を完成させることができます。