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

jquery点击导航按钮

2 个答案: