jquery - 使用jquery显示和隐藏div

Question

我在显示和隐藏某些 div 时遇到问题。我唯一拥有的就是一个类(class)的跨度。我们需要点击的地方，显示或隐藏父h2下面的div我无法向 h2 或 div 添加一些类(这来自某些 cms，我们无法添加 css 类)，因此我们需要使用一些 jquery 来完成此操作。

<div>
  <h2>
    <span class="h2toggle">Heading (This shows an hide the div below)</span>
  </h2>
  <div>
    <p>Some text</p>
    <p>More text</p>
  </div>
</div>

<div>
  <h2>
    <span class="h2toggle">Heading 2 (This shows an hide the div below)</span>
  </h2>
  <div>
    <p>Some text 2</p>
    <p>More text 2</p>
  </div>
</div>  

现在我有类似以下代码的内容。但现在，当页面将被加载时。我们将隐藏“一些文本”和“更多文本”周围的 div。但你可以看到，它从一开始就没有隐藏。它正在向上滑动。

它应该从一开始就隐藏(带有文本的 div )。没有看到页面有任何变化。页面加载后，必须可以切换标题。

(function ($) {
$(function () {
    $('.h2toggle').each(function () {
        $(this).parent('h2').addClass('h2toggle');
        $(this).removeClass('h2toggle');
        $(this).parent().siblings(':not(h2):visible').slideUp()
    });

    $('.h2toggle').click(function () {
        $(this).siblings(':not(h2):visible').slideUp()
        $(this).siblings(':not(h2):hidden').slideDown()
    });
});
})(jQuery);

Answer 1

呃...容易吗？

$('.h2toggle').click(function(){
    var $span = $(this);

    $span.parent('h2').next('div').slideToggle();
});

Demo, btw

要让它们开始隐藏，请使用 the following :

$('.h2toggle').parent('h2').next('div').slideUp();

除非我误解了...引用 H2，然后抓取下一个 div(在下面声明)并切换其显示。

如果您希望它更像“一次仅显示一个” Accordion ，那么我可以修改代码，但我不会那样解释它。