通过遍历兄弟元素在父元素中显示 div

Question

在我的 WordPress 网站上。我的主页上有两个 "Learn More" 链接。单击其中任何一个时，我希望他们谴责上面的相应段落并将 "Learn More" 更改为 "Close"。当前单击任一按钮都会显示两者。

.hide-mobile {
    display: none;
}

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);
    });
});

<div class="box-one box">
<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 box">
<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

为什么从 <p> 个元素开始查找？

$( "p" ).siblings( ".reveal" ).slideToggle(500);

当 .reveal 元素也是您要定位的 p 时？
this 正是您所需要的！

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';
    });
    $( this ).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 box">
  <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 box">
  <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>

通过遍历兄弟元素在父元素中显示 div

showing a div within a parent element by traversing siblings

jquery

siblings