javascript - 在动画导航下拉菜单上创建点击关闭事件

Question

我有两个问题:

1. 我正在尝试创建一个点击关闭事件，在该事件中检测到点击“导航”菜单，这会触发取消选择打开的列表元素并收回其各自的下拉内容。
2. 我当前的代码不允许添加另一个没有下拉内容的列表元素/导航项，因为这样做会妨碍整个代码的工作。我想添加另一个没有下拉内容的“导航”列表元素，而不妨碍其他列表元素及其各自下拉内容的功能。

这是我的代码(也可以在 JSFiddle 上找到):

$(function() {

  function animate() {
    $('#nav .nav-ul li').off('click', animate)
    var $detected = $(this).closest('.nav-ul');
    $detected.find('li.detected').removeClass('detected');
    $(this).addClass('detected');

    //figure out which rel to show
    var ulToShow = $(this).attr('rel');

    //hide current rel
    if ($('.substitute .sub-child.active').length > 0) {
      $('.substitute .sub-child.active').hide(700, function() {
        $(this).removeClass('active');
        $('#' + ulToShow).fadeIn(528, function() {
          $(this).addClass('active');
          $('#nav .nav-ul li').on('click', animate)

        });
      });
    } else {
      $('#' + ulToShow).fadeIn(528, function() {
        $(this).addClass('active');
        $('#nav .nav-ul li').on('click', animate)
      });
    }
  }

  $('#nav .nav-ul li').on('click', animate);
});

* {
  margin: 0;
  padding: 0;
}

#nav {
  background-color: /*blue*/
  ;
  float: right;
}

#nav .nav-ul {
  list-style: none;
  float: right;
  background-color: /*yellow*/
  ;
  border-left: solid 2px #000000;
  border-right: solid 2px #000000;
}

#nav .nav-ul li {
  float: left;
  padding: 4px;
  font-weight: bold;
  color: #000000;
}

#nav .nav-ul li:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #E51D27;
}

#nav .nav-ul li.detected {
  color: #E51D27;
}

#nav .substitute {
  float: right;
  background-color: /*pink*/
  ;
  margin-right: 4px;
}

#nav .substitute .sub-child {
  float: left;
  display: none;
}

#nav .substitute .sub-child.active {
  display: block;
}

#nav .substitute .sub-child ul {
  list-style: none;
}

#nav .substitute .sub-child ul li {
  float: left;
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <ul class="nav-ul">
    <li class="" rel="pay1">Color</li>
    <li rel="pay2">Shape</li>
    <li rel="pay3">Size</li>
  </ul>
  <div class="substitute">
    <div id="pay1" class="sub-child">
      <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>
    </div>
    <div id="pay2" class="sub-child">
      <ul>
        <li>Square</li>
        <li>Circle</li>
        <li>Triangle</li>
        <li>Diamond</li>
      </ul>
    </div>
    <div id="pay3" class="sub-child">
      <ul>
        <li>Small</li>
        <li>Medium</li>
        <li>Large</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

1. I'm trying to create an click-off event, where a click off of the "nav" menu is detected, which triggers the deselection of the open list element and retracts its respective dropdown content.

为此，您可以在主体上创建一个单击事件处理程序，如果菜单打开则关闭菜单。像这样:

// close menu when clicking anywhere on the document
$(document).on("click", function() {
  $("#nav li.detected").removeClass("detected");
  $("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});

然后为了避免点击菜单时关闭，可以使用.stopPropagation()在 animate 函数中停止点击时事件在 DOM 树中向上冒泡。

2. My current code doesn't allow another list element/navigation item without dropdown content to be added, as doing so hinders the entirety of the code from working. I'd like to add another "nav" list element that doesn't have dropdown contents, without hindering the functionality of the other list elements and their respective dropdown content.

发生这种情况是因为每次单击菜单时您都在关联和取消关联事件(这并不是真正必要的)，因此当其中一个导航项没有关联的下拉菜单时，事件处理程序是已删除(使用 animate 函数中的 off())但它不会再次关联，这会导致您不希望出现这种行为。

解决方案很简单:显然不需要在每次调用 animate 函数时分离和重新附加点击事件处理程序。在 animate 函数中删除对 off 和 on 的调用，就这样了。

---

在这里您可以看到应用到您的代码的两个更改:

$(function() {

  function animate(e) {
    e.stopPropagation();
    var $detected = $(this).closest('.nav-ul');
    if (!$detected.hasClass("active-animation")) {
      $detected.addClass("active-animation");
      $detected.find('li.detected').removeClass('detected');
      $(this).addClass('detected');

      //figure out which rel to show
      var ulToShow = $(this).attr('rel');

      //hide current rel
      if ($('.substitute .sub-child.active').length > 0) {
        $('.substitute .sub-child.active').hide(700, function() {
          $(this).removeClass('active');
          $('#' + ulToShow).fadeIn(528, function() {
            $(this).addClass('active');
            $detected.removeClass("active-animation");
          });
        });
      } else {
        $('#' + ulToShow).fadeIn(528, function() {
          $(this).addClass('active');
          $detected.removeClass("active-animation");
        });
      }
    }
  }

  $('#nav .nav-ul li').on('click', animate);

  // close menu when clicking anywhere on the page
  $(document).on("click", function() {
    $("#nav li.detected").removeClass("detected");
    $("#nav div.active").hide(700, function() {
      $(this).removeClass("active");
    });
  });
});

* {
  margin: 0;
  padding: 0;
}

#nav {
  background-color: /*blue*/
  ;
  float: right;
}

#nav .nav-ul {
  list-style: none;
  float: right;
  background-color: /*yellow*/
  ;
  border-left: solid 2px #000000;
  border-right: solid 2px #000000;
}

#nav .nav-ul li {
  float: left;
  padding: 4px;
  font-weight: bold;
  color: #000000;
}

#nav .nav-ul li:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #E51D27;
}

#nav .nav-ul li.detected {
  color: #E51D27;
}

#nav .substitute {
  float: right;
  background-color: /*pink*/
  ;
  margin-right: 4px;
}

#nav .substitute .sub-child {
  float: left;
  display: none;
}

#nav .substitute .sub-child.active {
  display: block;
}

#nav .substitute .sub-child ul {
  list-style: none;
}

#nav .substitute .sub-child ul li {
  float: left;
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <ul class="nav-ul">
    <li class="" rel="pay1">Color</li>
    <li rel="pay2">Shape</li>
    <li rel="pay3">Size</li>
    <li>No Dropdown</li>
  </ul>
  <div class="substitute">
    <div id="pay1" class="sub-child">
      <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>
    </div>
    <div id="pay2" class="sub-child">
      <ul>
        <li>Square</li>
        <li>Circle</li>
        <li>Triangle</li>
        <li>Diamond</li>
      </ul>
    </div>
    <div id="pay3" class="sub-child">
      <ul>
        <li>Small</li>
        <li>Medium</li>
        <li>Large</li>
      </ul>
    </div>
  </div>
</div>