javascript - jQuery - 在多个 ID 上使用相同的函数 (ToggleNav/Dropdown)

Question

我正在尝试在我的网站上制作多个下拉菜单，为此我使用了这个 jQuery:

        $(function() {
        var pull        = $('#pull');
            menu        = $('#nav');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
    });

这是 html 部分:

<nav class="container">
  <a href="#" id="pull" style="display:block;"> 
      <h3>Menu</h3>
    </a>
        <ul id="nav" style="display:none;">
            <li><a href="#">Pizza</a></li>
            <li><a href="#">Pasta</a></li>
            <li><a href="#">Burger</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Drinks</a></li>
        </ul>
</nav>

如果我只有一个下拉菜单，效果会很好，但一旦我添加另一个下拉菜单，实际上只有其中一个(不管是两个、三个还是更多)会下拉。

我为每个菜单赋予了它自己的 ID，并且每次都复制代码并替换 ID，但这不起作用。

已经研究了这个 ( using the same function of different events ) 或这个 ( Jquery - use the same function for multiple requests ) 和其他线程，但我不知道如何在我的代码中应用它...

这是关于我正在尝试做的事情的 Jsfiddle:https://jsfiddle.net/thwdyccr/2/

Answer 1

使用类而不是 id，然后您可以使相同的代码适用于所有情况 (fiddle):

$(function () {
    var pull = $('.pull');

    $(pull).on('click', function (e) {
        e.preventDefault();
        var menu = $(this).next();
        menu.slideToggle();
    });
});

<nav class="container"> <a href="#" class="pull" style="display:block;"> 
          <h3>Menu1</h3>
        </a>

    <ul class="nav" style="display:none;">
        <li><a href="#">Pizza</a>
        </li>
        <li><a href="#">Pasta</a>
        </li>
        <li><a href="#">Burger</a>
        </li>
        <li><a href="#">Specials</a>
        </li>
        <li><a href="#">Drinks</a>
        </li>
    </ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
            <h3>Menu2</h3>
        </a>

    <ul class="nav" style="display:none;">
        <li><a href="#">Pizza</a>
        </li>
        <li><a href="#">Pasta</a>
        </li>
        <li><a href="#">Burger</a>
        </li>
        <li><a href="#">Specials</a>
        </li>
        <li><a href="#">Drinks</a>
        </li>
    </ul>
</nav>