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

Question

我有一个函数可以检查我的 trigger 元素是否有 class .collapsed 和 target 元素，方法是添加 '.expanded' class.但是，动画只出现一次，并且仅在条件为 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

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

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