當其他菜單被點擊時jQuery隱藏子菜單

我正在使用this小腳本創建一個包含子鏈接的水平菜單。我有一切工作，但有一個小的障礙，這是我需要子菜單關閉，當另一個子菜單被點擊。你可以看到我的菜單here我需要它，所以如果你點擊菜單一，然後點擊菜單二，那麼菜單一個子鏈接消失。當其他菜單被點擊時jQuery隱藏子菜單

這裏是jQuery的的菜單：

$(function() { 

// Dropdown toggle 
$('.dropdown-toggle').click(function(){ 
    $(this).next('.dropdown').toggle(); 
}); 

$(document).click(function(e) { 
    var target = e.target; 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
    $('.dropdown').hide(); 
    } 
}); 

});

來源

2017-02-12 Duggy G

的jsfiddle例子是真的很有幫助。 –

您需要添加：

$('.dropdown').css('display', 'none');

所以，你的下一個子菜單打開之前，關閉所有當前打開的。代碼：

// Dropdown toggle 
$('.dropdown-toggle').click(function(){ 
    $('.dropdown').css('display', 'none'); //New code 
    $(this).next('.dropdown').toggle(); 
});

來源

2017-02-12 14:14:26 whoiswho

完美。謝謝 –

您可以設定每次點擊都會removeClass。主動從所有.drop向下項，然後添加類活躍所點擊的項目，然後。下拉曲肘：不是（「主動」）隱藏（）

來源

2017-02-12 14:09:16 YonatanAr

如果有一些jsfiddle片段，我可以使它更簡單，但我希望你能得到我的想法:) – YonatanAr

在你custom.js你可以改變這些行：

// On click sub menu 
$('.dropdown-toggle').click(function(){ 
    $(this).next('.dropdown').toggle(); 
}); 

$(document).click(function(e) { 
    var target = e.target; 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
     $('.dropdown').hide(); 
    } 
});

有：

// 
// delegate the click event handler 
// 
$(document).on('click', '.dropdown-toggle', function(e) { 
    // 
    // is current submenu visible? 
    // 
    var isVisible = $(this).next('.dropdown').is(':visible'); 
    // 
    // hide all submenu, not current 
    // 
    $(this).siblings('.dropdown-toggle').next('.dropdown').hide(); 
    // 
    // toggle the visibility of current menu: visible <--> invisible 
    // 
    $(this).next('.dropdown').toggle(!isVisible); 
});

來源

2017-02-12 14:39:01 gaetanoM

當其他菜單被點擊時jQuery隱藏子菜單

回答

相關問題