我有一個使用 jquery 的按鈕打開的移動/回應式導航選單。該按鈕運行良好，直到我添加了一個 jquery 腳本來關閉視窗，如果用戶點擊選單 div 之外的任何地方，該腳本也可以按預期關閉任何地方的選單，除非嘗試使用初始選單按鈕，這贏得了如果我嘗試用它關閉選單，則不起作用（但如果它關閉，仍然可以用來再次打開選單）。
任何人都能夠幫助我弄清楚為什么按鈕本身不起作用？
$(document).ready(function() {
var mobileNav = $('#mobile-nav');
//Toggle hide on the menu
$('.btn-navbar').on('click', function(){
mobileNav.toggleClass('d-none');
});
// Hide menu if clicked outside
$(document).mouseup(function(e){
if (!mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')){
$('#mobile-nav').toggleClass('d-none');
}
});
});
uj5u.com熱心網友回復：
我不確定為什么，但按鈕不喜歡 $(document) 宣告......我現在使用相同的功能，但使用主要內容 div 的 id
uj5u.com熱心網友回復：
由于mouseup事件在click事件之前觸發，因此當您.btn-navbar實際上首先單擊與mouseup運行相關的處理程式時，它將類切換為d-noneon mobileNav，然后與單擊相關的處理程式運行，并再次將d-none類切換為on mobileNav，因此它永遠不會顯示更改，為了解決它們的問題，在mouseup處理程式中，您可以檢查目標元素是否不是.btn-navbar然后切換d-none類，如下所示：
$(document).mouseup(function(e){
if (!$(e.target).is('.btn-navbar') && !mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')){
$('#mobile-nav').toggleClass('d-none');
}
});
這是一個簡單的例子：
$(document).ready(function() {
var mobileNav = $('#mobile-nav');
//Toggle hide on the menu
$('.btn-navbar').on('click', function() {
mobileNav.toggleClass('d-none');
});
$(document).mouseup(function(e) {
if (!$(e.target).is('.btn-navbar') && !mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')) {
$('#mobile-nav').toggleClass('d-none');
}
});
});.d-none {
display: none
}
#mobile-nav {
background: red
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="btn-navbar">Toggle nav</button>
<h1 id="mobile-nav" class="d-none">nav content</h1>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/390267.html
標籤：javascript 查询 移动的 导航
上一篇：JS-陣列中的日期，鏈接構建