jquery单击下拉幻灯片切换导航答案

【问题标题】：jquery click drop down slide toggle navigationjquery单击下拉幻灯片切换导航
【发布时间】：2013-10-08 15:02:14
【问题描述】：

多年来，我一直试图弄清楚这一点。基本上我有一个菜单，当用户点击一个箭头时，它会滑动切换下面的下拉菜单。

我希望它做很多事情。

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/

【问题讨论】：

标签： jquery drop-down-menu navigation toggle

【解决方案1】：

如果您收集被点击的子“i”，它有助于稍后决定显示/隐藏哪个“div”。您的代码可以从向 li 添加不同的类中受益，但我写了一个答案，没有向您的原始 HTML 添加任何内容。希望这会有所帮助。

$('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);    
}

});

【讨论】：

感谢您的出色工作！我设法做到了：jsfiddle.net/c8kHN/8 但我认为您的解决方案更加优雅 - 非常感谢！

【解决方案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('close');
    $(this).parent('nav li').find('.dropdown').slideToggle(300);
});

希望这是您正在寻找的..

【讨论】：