jQuery在下拉菜单上切换

jQuery toggle on dropdown

本文关键字：下拉菜单 jQuery      更新时间：2023-09-26

问题：

在下面提供的例子中，我有一个带选项的侧导航，你点击可以显示一个切换的div。如果你点击菜单中的第三个项目"Dolar"，你会看到链接下方出现一个带三个选项的下拉列表。

这很好，但我希望在单击其他链接时关闭下拉列表。我不知道如何做到这一点。

jsFiddle:

http://jsfiddle.net/visualdecree/4A23Z/39/

jQuery:

注意：我知道这可能很乱，我还在学习。

$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']")
    .stop()
    .hide({width:'toggle'},400);
    $(panID)
    .css({'left' : '139px','overflow':'visible'})
    .stop()
    .animate
    ({ width: "toggle", opacity: "toggle"
    }, { duration: "slow" });
    $(".control-view").hide();  // Fadein menu close button
    $(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);   
});
$('.sn, .sn-drop').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});
$('.sn-alt').click(function(e) {
    $('ul.additional li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});

$(".control-view").hover( // Hover effect for menu close button
    function () {
    $(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
   }, 
    function () {
    $(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});
$('.control-view').click(function(e) {
        $("div[id*='sn-pan-']")
        .stop(true,true)
        .hide({width:'toggle'}, 100);
        $('ul.sidenav li').not(this).removeClass('active');
        $(".control-view").stop().fadeOut("fast");
});

$(".additional").hide(); // Controls for the 'design' dropdown
$(".sn-drop").click(function(){
    $(".additional").slideToggle(300);
    var scrt_var = Math.random();
    return false; //Prevent the browser jump to the link anchor
});

只要添加这个JQuery，当你点击侧边栏中的其他链接时，它就会关闭你的.additional

$(".sn").click(function(){
    $(".additional").slideUp(300);
    var scrt_var = Math.random();
    return false; //Prevent the browser jump to the link anchor
});
​

如果只是左边的链接，你想成为关闭下拉列表的触发器，那么你可以简单地使用以下内容：

$('.sn').click(function(){
    $('.additional').slideUp();
})
相关文章：