2017-11-06 12 views
0

私は2つのメニュー項目を持つメニューを持っています。ユーザーがメニュー項目をクリックすると、各メニュー項目のサブメニューを表示するためにJQueryを使いたいと思います。JQueryは一度に1つのメニュー項目を表示します

両方のサブエンティティが表示されます(class = "dropdown-content")。クリックしたメニュー項目の下に というサブメニューを表示するだけで、コードを変更する方法はありますか。 idを指定する必要はありません。

以下

は私のメニューです:

$('.menu-item').on('click', function() { 
 
    \t $('.dropdown-content').toggle(); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav-mobile"> 
 
      \t <li class="menu-item"> 
 
\t \t \t <img src="images/img1.png"/> 
 
\t \t \t <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> 
 
        \t <ul id="linksdrop" class="dropdown-content"> 
 
        \t \t <li><a href="#">Link1</a></li> 
 
         \t <li><a href="#">Link2</a></li> 
 
       \t \t </ul> 
 
       </li> 
 
       \t <li class="menu-item"> 
 
\t \t \t <img src="images/img2.png"/> 
 
\t \t \t <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> 
 
       \t <ul id="userdrop" class="dropdown-content"> 
 
         \t <li><a href="profile.html">My Profile</a></li> 
 
         \t <li><a href="logout.html">Log Off</a></li> 
 
        \t </ul> 
 
      \t </li> 
 
      </ul>

+1

、 "これは" クリックした要素を指します。これを知っているなら、あなたは "ドローダウンコンテンツ"の兄弟を見つけることができます(おそらくあなたが調べるほうがよいでしょうが、少なくとも親に行ってからulを見つけることができます)。 – delCano

+0

あなたが望むように私の答えをチェックアウトするだけです:) –

答えて

1

あなたが特定のDOM

の子供を切り替えることがchildren()機能を使用する必要があるので、あなたは

探しているものを達成するために $(this).children("ul").toggle();を使用します

$('.menu-item').on('click', function() { 
 
    \t $(this).children("ul").toggle(); 
 
    });
.dropdown-content{ 
 
display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav-mobile"> 
 
      \t <li class="menu-item"> 
 
\t \t \t <img src="images/img1.png"/> 
 
\t \t \t <a class="hide-on-med-and-down white-text" href='#'> 
 
     <span id="lblLinks">Links</span></a> 
 
        \t <ul id="linksdrop" class="dropdown-content"> 
 
        \t \t <li><a href="#">Link1</a></li> 
 
         \t <li><a href="#">Link2</a></li> 
 
       \t \t </ul> 
 
       </li> 
 
       \t <li class="menu-item"> 
 
\t \t \t <img src="images/img2.png"/> 
 
\t \t \t <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> 
 
       \t <ul id="userdrop" class="dropdown-content"> 
 
         \t <li><a href="profile.html">My Profile</a></li> 
 
         \t <li><a href="logout.html">Log Off</a></li> 
 
        \t </ul> 
 
      \t </li> 
 
     </ul>

1

主な問題は、あなたがclikingている李を識別するためにthisを使用して、DOM要素の子孫に沿って下方向に横断するfind()を使用する必要があります。 "クリック" イベントハンドラ内

$('.menu-item').on('click', function() { 
 
     $(this).find(".dropdown-content").toggle(); 
 
});
.dropdown-content{ 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav-mobile"> 
 
      \t <li class="menu-item"> 
 
\t \t \t <img src="images/img1.png"/> 
 
\t \t \t <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> 
 
        \t <ul id="linksdrop" class="dropdown-content"> 
 
        \t \t <li><a href="#">Link1</a></li> 
 
         \t <li><a href="#">Link2</a></li> 
 
       \t \t </ul> 
 
       </li> 
 
       \t <li class="menu-item"> 
 
\t \t \t <img src="images/img2.png"/> 
 
\t \t \t <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> 
 
       \t <ul id="userdrop" class="dropdown-content"> 
 
         \t <li><a href="profile.html">My Profile</a></li> 
 
         \t <li><a href="logout.html">Log Off</a></li> 
 
        \t </ul> 
 
      \t </li> 
 
      </ul>

関連する問題