onClick активная вкладка добавить / удалить класс

Question

Я работаю над аккордеонными вкладками здесь, в активном. Я хочу добавить класс .elementor-active в '.elementor-tab-title', но когда я попытался добавить активный класс, он добавляется ко всем '.elementor- tab-title 'Я также использовал .siblings() и children(), но все еще не работает, может кто-нибудь направить меня в правильном направлении.

(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    $('.elementor-accordion-item > .elementor-tab-title').addClass('elementor-active').closest().find('.elementor-active').removeClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

Answer 1

вы можете использовать $(this) вместо получения элемента с помощью класса. вам нужно знать, как работает ключевое слово this в JavaScript.

    (function ($) {

        var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
        $('.elementor-accordion-item > .elementor-tab-title > a').click(function () {
            if (!$(this).parent().hasClass('elementor-active')) {
                allPanels.slideUp();
                allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
                $(this).parent().addClass('elementor-active')
                $(this).parent().next().slideDown();
            }
            else {
                allPanels.slideUp();
                allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
            }

            return false;
        });

    })(jQuery);

.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

Answer 2

Это может быть то, что вы ищете. Для ясности я разделил класс добавления и удаления.

(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    $('.elementor-accordion-item > .elementor-tab-title').removeClass('elementor-active');
    $(this).parent().addClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

Answer 3

В обработчике события jQuery см. $ (This) для выбранного элемента вместо селектора класса. Затем вы можете сделать следующее:

1) Удалить все классы из заголовков (используя селектор классов)
2) Добавить класс к родительскому элементу выбранного элемента

Посмотрите на фрагмент (была изменена только часть jquery)

(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    //Removing all classes from titles (1)
    $('.elementor-accordion-item > .elementor-tab-title').removeClass('elementor-active')
    //Then applying the class to the parent of the clicked element (2)
    $(this).parent().addClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

Answer 4

Вот некоторые изменения

Просто удалите перед добавлением класса $('.elementor-tab-title').removeClass('elementor-active');

и добавьте класс к целевому элементу $(this).parent().addClass('elementor-active');

Редактировать:

Если вы хотите переключиться, вы можете проверить с помощью $(this).parent().hasClass('elementor-active'), есть ли у элемента класс или нет, и выполнить действие, как показано ниже.

(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    //allPanels.slideUp();
    if($(this).parent().hasClass('elementor-active')){
      $(this).parent().removeClass('elementor-active').next().slideUp();
    } else {
     $(this).parent().addClass('elementor-active').next().slideDown();
    }
    return false;
  });

})(jQuery);

.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>