如何刪除切換課程時點擊外部菜單

下拉菜單是用CSS和HTML/JS設計的，使用從JS添加的名爲「is-open」的類。一旦出現在指定的HTML div內，它將激活CSS顯示子菜單。如何刪除切換課程時點擊外部菜單

但是，有一個小問題，點擊下拉菜單不會消失，除非點擊相同的菜單項。（當點擊菜單內容div之外時，該類將不會取消切換）

作爲基本功能，只要用戶不僅在菜單上點擊，而且在頁面上的任何位置點擊該菜單，該菜單也必須消失。

我現在的javascript如下：

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
     e.stopPropagation(); 
     if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
     } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
     } 
    }); 
});

下面是代碼的codepen例如：https://codepen.io/anon/pen/EwMjrz

來源

2017-10-21 109881

[Hier只是一個很好的例子]（https://codepen.io/Ferhad/pen/OxZWNm） –

@FerhadOthman你的解決方案不起作用。它允許第一個菜單項（在這種情況下，「文章」）在div外單擊時摺疊，但是任何後續菜單項都不受影響。請參閱https://codepen.io/hioioasd90/pen/qPwBEW – 109881

第13行'var element = document.querySelector（「。has-submenu.is-open」）;'選擇器必須是類is-open –

您可以添加事件偵聽器的文件，關閉你的菜單，像這樣

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
    e.stopPropagation(); 
    if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
    } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
    } 
    }); 
    $(document).on('click', function (e) { 
    e.stopPropagation(); 
    $('.has-submenu').removeClass("is-open"); 
    }); 
});

這應該是訣竅！

來源

2017-10-21 10:24:53 3Dos

我有將您的修改後的代碼添加到codepen https://codepen.io/anon/pen/EwMjrz，但它仍然無法正常工作。 – 109881

我會假設你沒有真正測試過你的解決方案，因爲你的選擇器不正確，只有在** WebsitePrimaryNav **的'div'部分中點擊，而不是在頁面的其他地方。 – NewToJS

對不起，我編輯了我的文章，有一個錯字。我在@ 109881提供的codepen上測試了它（在行中有子菜單之前添加點） – 3Dos

如何刪除切換課程時點擊外部菜單

回答

相關問題