时间戳

首页 > 解决方案 > jQuery each 在每个其他元素上运行函数

javascript - jQuery each 在每个其他元素上运行函数

问题描述

我正在研究 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);
    })
});

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

我想过在每个函数之前放置一个默认的点击函数，如下所示：

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)在这篇文章中很生气，这可能会起作用（还没有尝试过），但我认为这将是重复的代码，并且可能有更好的方法可以让它起作用。

标签： javascriptjquery

解决方案

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

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

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

推荐阅读