如何編輯我的代碼，以便在點擊導航欄外部時關閉導航欄，但如果點擊其中的某些內容則保持打開狀態？
JSFiddle：https ://jsfiddle.net/v45q3ykh/6/
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
uj5u.com熱心網友回復：
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
嗨，您只需要在單擊導航項時阻止檔案單擊，并像上面的代碼一樣處理一些額外的事情。
您也可以在此處查看Plunker 示例。
uj5u.com熱心網友回復：
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360337.html
標籤：javascript html css 推特引导 bootstrap-5