Question

我一直试图解决这个问题。基本上我有一个菜单，当用户点击箭头时，它将滑动切换下面的下拉菜单。

我希望能做很多事情。

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/

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

}）;

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

希望这是你在寻找..

jquery点击下拉幻灯片切换导航

2 个答案: