JQuery при нажатии открыть и переключить

Question

Я работаю над сайтом WordPress.У меня есть две ссылки "Узнать больше" на моей странице.Когда кто-то нажимает, я бы хотел, чтобы они оскорбили соответствующий параграф выше.В настоящее время нажимая либо, либо показывает оба.Также было бы очень полезно изменить текст ссылки с «Узнать больше» на «Закрыть».

jQuery(document).ready(function($) {
    $(".learnMore").on("click", function(e) {
        var $a = $(this).toggleClass("is-active")
        $a.text(function(i, t) {
            return t === 'Learn More' ? 'Close' : 'Learn More';
        });
        $( "p" ).siblings( ".reveal" ).slideToggle(500);
    });
});

.hide-mobile {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-one">
<h2>Header One</h2>
<p class="hide-mobile reveal">Etiam ut vehicula velit. Cras ut ipsum id tortor ultrices iaculis. Donec sodales ultricies urna vitae porta.</p>
<a class="button" href="/link-url/">Button One</a>
<a class="learnMore mobile">Learn More</a>
</div>

<div class="box-two">
<h2>Header Two</h2>
<p class="hide-mobile reveal">Morbi et varius elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<a class="button" href="/link-url-two/">Button Two</a>
<a class="learnMore mobile">Learn More</a>
</div>

Любая помощь будет оценена.

Спасибо

Answer 1

Проблема в вашем коде заключается в том, что вы изменяете все .learnMore и .reveal элементы при нажатии на любой из них.

Чтобы исправить это, используйте this ключевое слово в обработчике события для ссылки на конкретный элемент, вызвавший событие.Оттуда вы можете пройти DOM, используя prev(), чтобы переключить связанный элемент .reveal.

jQuery(document).ready(function($) {
  $(".learnMore").on("click", function(e) {
    var $a = $(this).toggleClass("is-active")
    $a.text(function(i, t) {
      return t === 'Learn More' ? 'Close' : 'Learn More';
    });
    $a.prev(".reveal").slideToggle(500);
  });
});

.hide-mobile {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Header One</h2>
<p class="hide-mobile reveal">Etiam ut vehicula velit. Cras ut ipsum id tortor ultrices iaculis. Donec sodales ultricies urna vitae porta. </p>
<a class="learnMore mobile">Learn More</a>

<h2>Header Two</h2>
<p class="hide-mobile reveal">Morbi et varius elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<a class="learnMore mobile">Learn More</a>

Также обратите внимание, что вы говорили slideToggle() завершиться за 10 миллисекунд, что слишком быстро, чтобы его можно было увидеть, поэтому я замедлил егодо 300 мс.

Answer 2

Это потому, что вы выбираете все, попробуйте это:

    $("document").on("click", ".learnMore", function (e) {
        var $learnmore = $(e.currentTarget);
        $learnmore.toggleClass("is-active");
        $learnmore.html($learnmore.hasClass('is-active') ? 'Close' : 'Learn More');
        $learnmore.prev(".reveal").slideToggle(10);
    });