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

这是因为您正在选择所有内容，请尝试以下操作：

    $("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);
    });

Answer 2

代码中的问题是，当单击.learnMore和.reveal元素中的任何一个时，都将对其进行更改。

要解决此问题，请在事件处理程序中使用this关键字来引用引发事件的特定元素。从那里，您可以使用prev()遍历DOM，以获取相关的.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毫秒内完成，这太快了，无法显示，因此我将其减慢到300ms。

jQuery单击显示并切换

2 个答案: