如何将hide（）嵌套在toggle（）jQuery中？

Question

我试图将hide（）选项添加到已经具有toggle（）的div中。因此，当div扩展时，文本足够长，当我单击div以使其隐藏时，我想在文本末尾具有锚点。我尝试了如下操作，但没有成功。目前，该网站运行良好，但我想添加此功能。HTML是

$(document).ready(function() {
  $('h5').click(function(e) {
    $(this).parent().next().toggle();
    $(this).parent().next().next().next().toggle();
  });
  $('h5').click(function(e) {
    $(this).find('div.description').hide();
  });
});

.description {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h1>14-nov-2019</h1>
  <h2>What is Urespray?</h2>
  <h5>click for more</h5>
</div>
<div class="description">
  <p>text text long text</p>
  <h5>Less</h5>
</div>

具有此功能的站点在下面，查找“ Articole tehnice”部分，然后按写有“ click pentru articol”的位置。谢谢http://agroline.eu/articole-tehnice.html#info-articole

Answer 1

您可以为切换创建新元素，该元素还将根据description元素的可见性来更改其文本。如果您有多个相同的元素demo

，此解决方案也将有效

demo

$(".toggle").click(function() {
  const desc = $(this).prev('.description');
  desc.toggle();
  $(this).text(desc.is(':visible') ? 'Show less' : "Show more")
})

.description {
  display: none;
}

.toggle {
  cursor: pointer;
}

Answer 2

@@ Nenad Vracar的回答很好。根据您的问题的另一种方式，您可以尝试此]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h1>14-nov-2019</h1>
  <h2>What is Urespray?</h2>
</div>
<div class="description">
  <p>text text long text</p>
</div>
<h5 class="toggle">Show more</h5>