Событие JavaScript срабатывает дважды

У меня есть короткий фрагмент 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) и жесткое кодирование действия, установленного рекурсивно, также не работает.

Любые идеи? Я уверен, что это, вероятно, что-то глупое...

Спасибо


javascript navigation menu jquery onclicklistener
person Community    schedule 29.01.2017    source источник
comment
Можете ли вы поделиться скрипкой, демонстрирующей вашу проблему?   -  person user3775217    schedule 29.01.2017
comment
Я обновил вопрос, спасибо.   -  person    schedule 29.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я решил вашу проблему. Найдите работающую скрипту.

Этот прослушиватель событий запускается дважды каждый раз для каждого элемента ul

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

изменить это на

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

Я также обновил скрипку

Надеюсь это поможет

person user3775217    schedule 29.01.2017
comment
Конечно, это имеет смысл, когда ты видишь, что это написано перед тобой... Я догадался, что это может быть что-то тривиальное. Благодарю вас! - person ; 29.01.2017
comment
да, я снова обновил скрипку, так как один из случаев дал сбой, теперь он работает круто. Спасибо - person user3775217; 29.01.2017