jQuery` .click`条件不响应`else`

Question

我有一个函数可以通过添加'.expanded'类来检查我的trigger元素是否具有类.collapsed和target元素。但是，动画仅出现一次，并且仅在条件为true时出现。出于某种原因，false分支被忽略。这是我的功能：

function toggleArrow(){
  var target = $(this).find('img.arrow');
  if($(this).hasClass('collapsed')){
    $(target).addClass('expanded');
  } else {
    $(target).removeClass('expanded');
  }
}

$('.foo a').click(toggleArrow);

编辑：

创建了一个Bootply：http://www.bootply.com/OP1yHNihDe#

解决方案：

使用@Binvention回答并移除else分支，将addClass / removeClass替换为toggleClass，如下所示：

function toggleArrow(e){
  var target = $(this).find('img.arrow');
  if(!$(this).is('expanded')) {
    $(target).toggleClass('expanded');
  }
}

Answer 1

我会改为使用折叠或展开的单个类（折叠会更容易，因为对象上的默认显示是在网页上显示的块），然后只使用.toggleClass()函数。它更简单，结果应该是一样的。所以你的代码看起来像这样：

function toggleArrow(){
  var target = $(this).find('img.arrow');
  $(target).toggleClass('collapsed');
}