JavaScript 事件触发两次

Question

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

这项工作的第一部分，我可以单击一个菜单项，它会打开和关闭，但是如果我在一个打开的同时单击另一个菜单项，那么它将关闭（如预期），打开（如预期）然后再次关闭。就好像事件被触发了两次。

这是我的 JS sn-p。

$(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

我已经解决了你的问题，请找到工作的fiddle

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

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

改成

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

我也更新了小提琴

希望对你有帮助