jQuery點擊打開一個下拉框

Question

在一個網站中，我有幾個「下拉列表」，當您按加號時變得可見。我用jQuery做了這個（見下面的代碼），但是每當按下按鈕打開時。我怎樣才能打開按鈕按下的下拉列表（沒有爲每個按鈕再次寫這個代碼）？

$('main .menu').click(function() { 

     if($(this).hasClass('open')) { 
      $(this).removeClass('open'); 
      $('main .menu').html('+'); 
      $('main .info').slideUp(); 

     } 
     else { 
      $(this).addClass('open'); 
      $('main .menu').html('-'); 
      $('main .info').slideDown(); 

     } 

}); 

HTML：

<div id="first"> 
      <img src="images/flexit.jpg" alt=""> 
      <h2>Flexit</h2> 
      <a href="#" class="menu">&#43;</a> 
      <div class="info"> 
       <table> 
        <tr> 
         <td>Name:</td> 
         <td>Flexit</td> 
        </tr> 
        <tr> 
         <td>Dimensions:</td> 
         <td>2000 x 1600 x 1900 mm</td> 
        </tr> 
        <tr> 
         <td>Material(s):</td> 
         <td>powdercoated steal, redwood</td> 
        </tr> 
        <tr> 
         <td>Weight:</td> 
         <td>43 kg</td> 
        </tr> 
        <tr> 
         <td>Current location:</td> 
         <td>Buzzkruit exhibition, Designcenter Winkelhaak Antwerp</td> 
        </tr> 

       </table>   
      </div> 

Answer 1

你需要保持加上菜單前：

<a href="#" class="menu-trigger">+</a> 
<ul class="menu"> 
    <!-- Menu --> 
</ul> 
<a href="#" class="menu-trigger">+</a> 
<ul class="menu"> 
    <!-- Menu --> 
</ul> 

而在jQuery的，你只需要給出加，你也可以加上減號：

$(".menu-trigger").click(function() { 
    $(this).next(".menu").toggleClass("open"); // Selects only the next one! 
}); 

Check o這裏UT斯達康的片段：

$(function() { 
 
    $(".menu-trigger").click(function() { 
 
    $(this).next(".menu").toggleClass("open"); // Selects only the next one! 
 
    $(this).html($(this).next(".menu").hasClass("open") ? '-' : '+'); 
 
    return false; 
 
    }); 
 
});

.menu-trigger {display: block; width: 3em; text-decoration: none;} 
 
.menu {display: none;} 
 
.menu.open {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href="#" class="menu-trigger">+</a> 
 
<ul class="menu"> 
 
    <li>Menu 1</li> 
 
    <li>Menu 1</li> 
 
    <li>Menu 1</li> 
 
</ul> 
 
<a href="#" class="menu-trigger">+</a> 
 
<ul class="menu"> 
 
    <li>Menu 2</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 2</li> 
 
</ul>