jquery addClass触发

Question

我有一组触发器div，点击动画最近的div为.animatePanel的div。

我有以下jQuery但是我想在显示动画面板时向点击触发器（.panelTab）添加一个类，以及应用于动画面板的类。

$('.panelTab').click(function() {
  var panel = $(this).next()
  $('.animatedPanel').removeClass('active');
  $('.animatedPanel').not(panel).slideUp();
  panel.addClass('active').slideToggle({
      direction: "up"
  }, 100);
});

Answer 1

$('.panelTab').click(function() {
  $(this).addClass('someClass');
  var panel = $(this).next()
  $('.animatedPanel').removeClass('active');
  $('.animatedPanel').not(panel).slideUp();
  panel.addClass('active').slideToggle({
  direction: "up"
  }, 100);
});

听起来你只想将addClass应用于点击的panelTab。因此，您可以在该侦听器中使用$(this)来访问所单击的panelTab。

你在寻找更复杂的东西吗？

在将所有panelTab类添加到单击的类之前，或许从所有panelTab类中删除“someClass”？

within the listener...
$('.panelTab').removeClass("someClass");
$(this).addClass("someClass");
..

Answer 2

我认为你正在寻找这个

$('.panelTab').click(function() {
  $(this).addClass('active');
  var panel = $(this).next()
  $('.animatedPanel').removeClass('active');
  $('.animatedPanel').not(panel).slideUp();
  panel.addClass('active').slideToggle({
  direction: "up"
  }, 100);
});

编辑：

 $('.panelTab').click(function() {
      // this removeClass will remove active state of all panelTab elements.
      $('.panelTab').removeClass('active');
      // Then this will add active class only to that trigger. So you will have only one active trigger.
      $(this).addClass('active');
      var panel = $(this).next()
      $('.animatedPanel').removeClass('active');
      $('.animatedPanel').not(panel).slideUp();
      panel.addClass('active').slideToggle({
      direction: "up"
      }, 100);
    });