Question

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

这个工作的第一部分，我可以点击一个菜单项，它会打开和关闭，但是如果我点击一个不同的菜单项，而一个打开然后它将关闭（如预期），打开（如预期）然后再次关闭。好像事件被解雇了两次。

这是我的JS代码段。

＆＃13;

$(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);
    });
  }
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

有什么想法吗？我确定它可能是愚蠢的......

由于

Answer 1

我已解决了您的问题，请找到有效的fiddle

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

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

将此更改为

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

我也更新了小提琴

希望这有帮助

JavaScript事件发生两次

1 个答案: