jquery点击导航按钮

Question

我有一个简单的导航，用户点击并滑动，然后用户再次单击并滑动并关闭。目前我正在使用removeClass和addClass来更改导航打开/关闭箭头的位置。我遇到的问题是导航打开/关闭箭头在您点击打开导航时会改变其位置，但是当您单击箭头关闭导航时，箭头不会更改回原始位置。如果有人可以看看我的代码，我将不胜感激！我无法弄清楚为什么这不起作用。谢谢！

这里是我的代码的链接http://jsfiddle.net/jsavage/QmEcs/6/

$(function(){ 
var $itemContent = $('.drop-down-nav'); 
$('.drop-down-btn').click(function(e){ 
    $('.drop-down-btn').removeClass('drop-down-btn'); 
    $('.drop-down-nav-container a').addClass('drop-down-btn-up'); 
    e.preventDefault(); 
    if($itemContent.hasClass('opened')){ 
    $itemContent.slideUp('fast').toggleClass('closed opened'); 
    } else { 
    $itemContent.slideDown('fast').toggleClass('closed opened'); 
    } 
}); 

$(function(){ 
var $itemContent = $('.drop-down-nav'); 
$('.drop-down-btn-up').click(function(e){ 
    $('.drop-down-btn-up').removeClass('drop-down-btn-up'); 
    $('.drop-down-nav-container a').addClass('drop-down-btn'); 
    e.preventDefault(); 
    if($itemContent.hasClass('opened')){ 
    $itemContent.slideUp('fast').toggleClass('closed opened'); 
    } else { 
    $itemContent.slideDown('fast').toggleClass('closed opened'); 
    } 
}); 

}）;

Answer 1

看起来你忘了在第二个函数中将类从opened更改为closed。因此，这两个功能都在有效地尝试将元素向下滑动 - 而且两者都不起作用。

Answer 2

http://jsfiddle.net/QmEcs/7/

我看不到箭头。

但附带的小提琴正确地将课程设置从黑色下拉到红色，然后再次返回。

$(function(){ 
var $itemContent = $('.drop-down-nav'); 
$('.drop-down-btn-up, .drop-down-btn').click(function(e){ 
    $('.drop-down-btn-up, .drop-down-btn').toggleClass('drop-down-btn-up drop-down-btn'); 
    e.preventDefault(); 
    if($itemContent.hasClass('opened')){ 
    $itemContent.slideUp('fast').toggleClass('closed opened'); 
    } else { 
    $itemContent.slideDown('fast').toggleClass('closed opened'); 
    } 
}); 
});