jQuery的切換

在下面的例子中提供的，我有一個選項sidenav，你點擊以顯示一切換股利。如果您點擊菜單「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 
});

來源

2012-09-07 Doidgey

任何原因它是低？ – Doidgey

64％並不低。 – Aelios

只要加入這個jQuery，當你點擊在您的邊欄中的其他鏈接，它會關閉您的.additional

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

來源

2012-09-07 12:19:14 Aelios

我試過這個，但是如果你點擊激活它的主鏈接，它會立即關閉這個代碼。 – Doidgey

「主鏈接」是什麼意思？ – Aelios

對不起，我意識到我的本地副本上有一個咒語類，它阻止了它的工作。這很好，謝謝Aelios。 – Doidgey

如果它只是在左，你想成爲觸發關閉下拉列表，然後鏈接，你可以用這個簡單的做到這一點：

$('.sn').click(function(){ 
    $('.additional').slideUp(); 
})

來源

2012-09-07 12:18:43 Fraser

回答

相關問題