JavaScript事件觸發兩次

我有一段JS應該顯示和隱藏站點的二級導航。如果用戶點擊菜單項應當出示，他們再次單擊它，它會隱藏，如果菜單項是開放的，他們點擊菜單項B然後關閉一個和打開乙其地點。這個作品的第一部分，我可以點擊一個菜單項，它會打開和關閉，但是如果我點擊一個不同的菜單項，而其中一個打開，那麼它應該關閉（如預期），打開（如預期的那樣）然後再關閉。就好像這個事件被解僱了兩次。JavaScript事件觸發兩次

這是我的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)位和硬編碼安裝的動作遞歸也不起作用。

任何想法？我敢肯定，這可能是一些愚蠢的......

感謝

來源

2017-01-29 AHOctet

你能分享一個小提琴演示你的問題？ – user3775217

我已更新問題，謝謝。 – AHOctet

我已經解決了您的問題，請找工作fiddle

此事件偵聽器，每次被觸發兩次，每次一個UI元素

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

改變這

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

我更新了小提琴以及

希望這可以幫助

來源

2017-01-29 19:54:08 user3775217

當然，當你看到它寫在你的面前時，這是有道理的......我猜它可能是一些微不足道的東西。謝謝！ – AHOctet

是的，我再次更新小提琴，因爲其中一個案件失敗，現在它的工作很酷。謝謝 – user3775217

JavaScript事件觸發兩次

回答

相關問題