jquery點擊下拉滑動切換導航

我一直在想這個問題的年齡。基本上我有一個菜單，當用戶點擊一個箭頭時，它會滑動下面的下拉框。jquery點擊下拉滑動切換導航

我想它做了一些事情。

1）當用戶點擊下拉箭頭，它滑下我希望他們能夠再次單擊箭頭和下拉菜單向上滑動。

2）如果用戶點擊一個不同的下拉箭頭，我想第一個下拉列表中消失，然後新的下拉菜單出現。

這是我到目前爲止。這是一個從點工作除了2

$('nav li i').click(function() { 
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300); 
    $('nav li').find('.open').not($(this)).removeClass('open');  
    $(this).toggleClass('open'); 
    $(this).parent('nav li').find('.dropdown').slideToggle(300); 
});

你可以看到這裏的jsfiddle其希望顯示出其好一點（紅色框爲可點擊區域）：

http://jsfiddle.net/c8kHN/1/

編輯：我已經設法讓第二個要點起作用（如果用戶點擊另一個點，第一個下拉菜單消失），然而它會打破第一個點。

$('nav li i').click(function() { 
    $('nav li.open').not($(this)).find('.dropdown').hide(); 
    $('nav').find('.open').not($(this)).removeClass('open');  
    $(this).parent('nav li').toggleClass('open'); 
    $(this).parent('nav li').find('.dropdown').slideToggle(300); 
});

http://jsfiddle.net/c8kHN/7/

來源

2013-10-08 user1788364

如果您收集了孩子「我」，也就是點擊它後可以幫助決定哪些「格」顯示/隱藏。您的代碼可以通過向li添加不同的類而受益，但是我在不添加任何內容的情況下編寫了答案。希望這可以幫助。

$('nav li i').click(function() { 

var child = $(this).index('nav ul li i'); 

if ($(this).siblings('.dropdown').is(":visible")){ 
    $('.dropdown').slideUp(300); 
}else{ 
    $('.dropdown').slideUp(300); 
    $('.dropdown:eq('+child+')').slideDown(300);  
}

}）;

來源

2013-10-08 16:28:36 80PoundsOfFury

謝謝這個工作奇妙！我設法做它用：http://jsfiddle.net/c8kHN/8/ 但我認爲您的解決方案是一個很大的優雅 - 太感謝你了！ – user1788364

我已經嘗試過這種代碼

$('nav li i').click(function() { 
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300); 
    $('nav li').find('.open').not($(this)).removeClass('open');  
    $(this).toggleClass('close'); 
    $(this).parent('nav li').find('.dropdown').slideToggle(300); 
});

希望這是你在找..

來源

2013-10-08 16:38:06 Manish

jquery點擊下拉滑動切換導航

回答

相關問題