1

我有一个简单的导航，用户点击它并向上滑动，用户再次点击它，它向下滑动并关闭。目前我正在使用 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');
  }
});

});

4

2 回答 2

1

看起来您忘记在第二个函数中将类从opened更改为。closed因此，这两个函数都在有效地尝试将元素向下滑动——并且它们都没有向上滑动。

于 2013-07-25T22:27:43.220 回答
0

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');
  }
});
});
于 2013-07-25T22:35:33.937 回答