下拉識別

Question

我有兩個下拉選項：

<ul class="menu"> 
    <li hidden class="inicio"><a href "#">Inicio</a> 
    </li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" id="Drop1">OPTION 1<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li class="bd-ric"><a href="#">Option 1.1</a> 
     </li> 
     <li><a href="#">Option 1.2</a> 
     </li> 
    </ul> 
    </li> 

    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" id="Drop2">OPTION 2<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li class="bd-ric"><a href="#">Option 2.1</a> 
     </li> 
     <li><a href="#">Option 2.2</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

當我試圖創建的Javascript功能來切換它，他們都開了：

$('.dropdown-toggle').click(function() { 
    $('.dropdown-menu').toggle(); 
}) 

我應該創建一個函數並調用它的HTML或我可以調用一個特定的ID切換事件？

Answer 1

您可以使用jQuery's next method：

$('.dropdown-toggle').click(function() { 
 
    $(this).next('.dropdown-menu').toggle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li hidden class="inicio"><a href "#">Inicio</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="Drop1">OPTION 1<b class="caret"></b></a> 
 
    <ul class="dropdown-menu"> 
 
     <li class="bd-ric"><a href="#">Option 1.1</a> 
 
     </li> 
 
     <li><a href="#">Option 1.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="Drop2">OPTION 2<b class="caret"></b></a> 
 
    <ul class="dropdown-menu"> 
 
     <li class="bd-ric"><a href="#">Option 2.1</a> 
 
     </li> 
 
     <li><a href="#">Option 2.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>