JavaScript事件触发两次

Question

I have a short piece of JS which is supposed to show and hide the secondary navigation of a site. If a user clicks Menu Item A it shall show, they click it again and it hides and if Menu Item A is open and they click Menu Item B then it closes A and opens B in its place.

The first part of this works, I can click a single menu item and it will open and close, if however I click a different menu item whilst one is open then it shall close (as expected), open (as expected) and then close again. It's as if the event is being fired twice.

Here is my JS snippet.

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

Swapping out the handleSecondaryNavigation(MenuItem) bit and hard coding the action installed of recursively also does not work.

Any ideas? I'm sure it's probably something silly...

Thanks

Answer 1

I have solved your issue and please find the working fiddle

This event listener is triggered twice each time for each ul element

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

change this to

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

I have updated the fiddle as well

Hope this helps