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

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

不是使用ID - 而是考虑使用类 - 这样可以在代码中避免大量重复（基本上它们都在做同样的事情）。

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

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

如果您想知道我将$(this)存储在var element中的原因 - 这是因为浏览器必须弄清楚每次使用时$(this)是什么 - 所以它＆＃39;将它存储在变量中的良好做法。

<强> 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

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

你不应该为pull使用id。这是一个更新的小提琴https://jsfiddle.net/thwdyccr/2/。

Answer 4

尝试使用Attribute Starts With Selector [name^="value"] [id^=pull]，e.target.parentElement.nextElementSibling选择下一个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）

4 个答案: