jQuery

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 ) or this (Jquery - use the same function for multiple requests) 和其他线程，但我不知道如何在我的代码中应用它...

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

Answer 1

试试这个： https://jsfiddle.net/thwdyccr/5/

与其使用 ID，不如考虑使用 class，这样可以避免代码中的大量重复（因为本质上它们都在做同样的事情）。

您可以通过使用 .parent() .children() 或 .find()

遍历您的结构来指定目标选择器（例如您要显示的元素）

如果你想知道为什么我在 var element 中存储 $(this) - 这是因为浏览器必须在你每次使用它时弄清楚 $(this) 是什么 - 所以它是将其存储在变量中的好习惯。

HTML

<nav class="container">
  <a href="#" class="pull" style="display:block;"> 
      <h3>Menu1</h3>
    </a>
        <ul class="nav" style="display:none;">
            <li><a href="#">Bear</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="#">Fish</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>

JS

$(function() {
    $(".pull").click(function(e) {
        e.preventDefault();
        var element = $(this); 
        element.parent('nav.container').children("ul.nav").slideToggle();
    });
});

Answer 2

您不应该为 pull 使用 id。这是更新后的 fiddle https://jsfiddle.net/thwdyccr/2/.

Answer 3

使用类而不是 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>

Answer 4

尝试利用 Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling 到 select 接下来 ul 在

上调用 .slideToggle()

$(function() {
  var pull = $("[id^=pull]")
  , menu = $("[id^=nav]")
  , menuHeight = menu.height();

  pull.on("click", function(e) {
    e.preventDefault();
    $(e.target.parentElement.nextElementSibling).slideToggle();
  });
});

jsfiddle https://jsfiddle.net/wpvok7gy/1/

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

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

html

javascript

css

drop-down-menu