jQuery每个其他元素上的运行函数

Question

我正在研究HTML和jQuery中的基本下拉菜单元素，并且试图更好地理解JavaScript和jQuery，因此，这个问题也与代码重构有关。

所以这是到目前为止我得到的：

HTML

<li class="nav-item">
    <a class="nav-link" href="#">Foo</a>
    <div class="subnav">
       ...
    </div>
</li>

JavaScript的

const navLink = $('.nav-link');

navLink.each(function () {
    let $this = $(this);
    $this.click(function (e) {
        let hasSubnav = $this.parent().find('.subnav');
        if(hasSubnav.length !== 0) {
            e.preventDefault();
            $this.toggleClass('dropdown-active');
        }
        hasSubnav.stop(true, true).slideToggle(200);
    })
});

此解决方案效果很好。 因此，我接下来要做的是检查循环中的另一个元素是否处于活动状态，相应地关闭，然后打开我刚刚单击的元素。

我考虑过将默认的click函数放在每个函数之前，如下所示：

navLink.click(function () {
    $('.subnav').slideUp();
});
navLink.each(function () {
    let $this = $(this);
    $this.click(function (e) {
        let hasSubnav = $this.parent().find('.subnav');
        if(hasSubnav.length !== 0) {
            e.preventDefault();
            $this.toggleClass('dropdown-active');
        }
        hasSubnav.stop(true, true).slideDown(200);
    })
});

但这似乎不起作用。 所以我的问题是，即使在每个函数内部，有没有一种漂亮的方法来实现这一目标？ 我在这篇文章中提到了.not(this) ，这可能会起作用（尚未尝试过），但是我认为这将是重复的代码，并且可能会有更好的方法来使它起作用。

Answer 1

您的代码现在遍历每个导航链接，并向其中一个添加一个单击处理程序。 可以删除每个循环，因为您可以一次将单击处理程序添加到所有导航链接。

您所要做的就是在导航链接中添加一个点击处理程序，然后删除活动的类并向上滑动所有打开的下拉菜单，然后再执行逻辑。 请参阅下面的工作代码示例以供参考：

 // Collapse all initially $(".subnav").slideUp(); // Add click handler to all nav-links const navLink = $('.nav-link'); navLink.click(function(e) { // Remove active classes on other elements & slide up const otherLinks = navLink.not(this); otherLinks.removeClass('dropdown-active'); otherLinks.parent().find('.subnav').slideUp(); // Slide down the subnav of selected element let hasSubnav = $(this).parent().find('.subnav'); if (hasSubnav.length !== 0) { e.preventDefault(); $(this).addClass('dropdown-active'); } hasSubnav.stop(true, true).slideToggle(200); }) 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <li class="nav-item"> <a class="nav-link" href="#">Foo</a> <div class="subnav"> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Foo</a> <div class="subnav"> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> </div> </li>