logo标签列表

jQuery - 如何在多个ID上使用同一个函数（ToggleNav/Dropdown）

javascriptjqueryhtmlcssdrop-down-menu
3

我正在尝试在我的网站上制作多个下拉菜单，我正在使用以下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，但这并没有起作用。
我已经查看了此（使用不同事件的相同函数）或此（jQuery-对多个请求使用相同的函数）和其他帖子，但我无法弄清楚如何将其应用到我的代码...
这是我尝试做的事情的Jsfiddle：https://jsfiddle.net/thwdyccr/2/。
4个回答
1

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

不要使用ID，考虑使用类 - 这样可以节省大量的代码重复（因为基本上都在做同样的事情）。

您可以通过使用 .parent()、.children() 或 .find() 遍历您的结构来指定目标选择器（例如，您想要显示的元素）。

如果您想知道为什么我要将 $(this) 存储在 var element 中 - 那是因为浏览器每次使用它时都必须找出 $(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（JavaScript）
$(function() {
    $(".pull").click(function(e) {
        e.preventDefault();
        var element = $(this); 
        element.parent('nav.container').children("ul.nav").slideToggle();
    });
});
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>
这个应用程序快得要命，而且非常容易理解。非常感谢您！ - reTrOBIAS
不客气。欢迎 :) - Ori Drori
0
0
尝试使用 属性开始选择器 [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/

的内容与编程有关。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接