触发元素点击

Question

JSFiddle Live Demo

脚本说明

我的脚本是对邮箱进行排序和/或过滤，而您可以在点击时选择其中一个选项和排序选项，如果它处于活动状态，则会切换指示从AZ到ZA的图标反之亦然。

过滤器选项会更改按钮文本，单击按钮后，它会将按钮宽度设置为下拉宽度的动画，然后向下滑动下拉列表。再次单击时，它将反转该过程，检查文本是否已更改以调整宽度。

我希望实施的内容

单击.Active过滤器/视图选项之外的其中一个选项，我希望触发单击事件以反转显示进度。我尝试使用e.target触发此点击鼠标悬停，我不确定如何正确触发此操作，因为我的尝试一无所获。

Answer 1

您的trigger事件似乎工作正常，您只是在错误的元素上触发它。这似乎有效：

$('.dropdown-toggle').trigger("click");

我已更新plunker

Answer 2

您可以通过这种方式触发点击。

if ($(e.target).closest('.Sort').length) {
  if ($(e.target).hasClass('Active')) {
    $(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
  } else {
    $('.dropdown-menu .Sort').find('.Active').removeClass('Active');
    $('.dropdown-menu .Sort').find('i').remove();
    $(e.target).addClass('Active');
    $(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
  }

  //Here.
  //Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
  $('.dropdown-toggle').click();
}