1

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

我希望它做很多事情。

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/

4

2 回答 2

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);    
}

});

于 2013-10-08T16:28:36.413 回答
0

我试过这段代码

$('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-08T16:38:06.610 回答