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

2024-06-01 • 问答

我试图将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

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

，此解决方案也将起作用

const response = await fetch('assets/filename.json')
const json = await response.json();
console.log(json)

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

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

$(document).ready(function() {
      $('.taggle_description').click(function(e) {
        $(this).parent().next().toggle();
      });
      $('.hide_this_div').click(function(e) {
        $(this).parent().hide();
      });
    });

.description {
      display: none;
    }

<div class="title">
  <h1>14-nov-2019</h1>
  <h2>What is Urespray?</h2>
  <h5 class="taggle_description">click for more</h5>
</div>
<div class="description">
  <p>text text long text</p>
  <h5 class="hide_this_div">Less</h5>
</div>

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

ludyhhm 回答：如何将hide（）嵌套在toggle（）jQuery中？

大家都在问