javascript - jQuery 单击打开一个下拉菜单

Question

在一个网站中，我有几个“下拉菜单”，当您按加号时，它们就会变得可见。我用 jQuery 做到了这一点(参见下面的代码)，但是当按下按钮时，每个 dorpdown 都会打开。我怎样才能只打开按下按钮的下拉菜单(无需为每个按钮重新编写此代码)？

 $('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!
});

查看此处的代码片段:

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