JavaScript 事件触发两次

Question

我有一小段JS，它应该显示和隐藏站点的辅助导航。如果用户单击菜单项 A，它将显示，他们再次单击它并隐藏，如果菜单项 A 打开并且他们单击菜单项 B，则它关闭 A 并在其位置打开 B。

这工作的第一部分，我可以单击单个菜单项，它将打开和关闭，

但是如果我在一个菜单项打开时单击不同的菜单项，那么它将关闭（按预期），打开（按预期）然后再次关闭。就好像事件被触发了两次。

这是我的JS片段。

$(document).ready(function() {
  $('.NavButton').click(function(event) {
    handleSecondaryNavigation(event.target.alt);
  });
});
function handleSecondaryNavigation(MenuItem) {
  if ($('#ul' + MenuItem).is(':visible')) {
    // Menu item visible, hide it
    $('#SecondaryNavigation').animate({
      width: 'toggle'
    }, 350, function() {
      $('#ul' + MenuItem).hide();
    });
  } else if ($('#SecondaryNavigation').is(':visible')) {
    // Clicked different menu item, hide then show (swap)
    $('#SecondaryNavigation').animate({
      width: 'toggle'
    }, 350, function() {
      $('#SecondaryNavigation ul').hide(function() {
        handleSecondaryNavigation(MenuItem);
      });
    });
  } else {
    // Menu not visible, show it
    $('#ul' + MenuItem).show(function() {
      $('#SecondaryNavigation').animate({
        width: 'toggle'
      }, 350);
    });
  }
}

#MainNavigation {
  background: #F1F1F1;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
}
#MainNavigation .NavButton {
  width: 20px;
  display: block;
  padding: 15px 20px;
  cursor: pointer;
}
#SecondaryNavigation {
  position: fixed;
  top: 0px;
  left: 60px;
  bottom: 0px;
  background: #DADADA;
  width: 200px;
  display: none;
  box-shadow: 2px 0px 5px #686868;
}
#SecondaryNavigation ul {
  display: none;
  margin: 0px 10px;
}
#SecondaryNavigation ul li {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #CBCBCB;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="MainNavigation">
  <img class="NavButton" alt="A" />
  <img class="NavButton" alt="B" />
</nav>
<nav id="SecondaryNavigation">
  <ul id="ulA">
    <li>Lorem</li>
    <li>Ipsum</li>
  </ul>
  <ul id="ulB">
    <li>Lorem</li>
    <li>Ipsum</li>
  </ul>
</nav>

换掉handleSecondaryNavigation(MenuItem)位并以递归方式对安装的操作进行硬编码也不起作用。

有什么想法吗？我敢肯定这可能是一些愚蠢的事情...

谢谢

Answer 1

我已经解决了您的问题，请找到工作小提琴

对于每个 ul 元素，每次触发两次此事件侦听器

$('#SecondaryNavigation ul').hide(function() {
      console.log("hide trug");
        handleSecondaryNavigation(MenuItem);
      });

将其更改为

$('#SecondaryNavigation ul').hide(function() {        
  });
  handleSecondaryNavigation(MenuItem);

我也更新了小提琴

希望这有帮助