使用 jquery 显示和隐藏 div

Question

我无法显示和隐藏一些 div。 我唯一拥有的是一个班级的跨度。我们需要点击的地方，显示或隐藏父级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（在下面声明）并切换它的显示。

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

Answer 2

您似乎正在向上滑动所有内容，然后又向下滑动所有内容：

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

也许这会起作用：

$('.h2toggle').click(function () {
    var visibleStuff = $(this).siblings(':not(h2):visible');
    var hiddenStuff = $(this).siblings(':not(h2):hidden').slideDown();

    visibleStuff.slideUp();
    hiddenStuff.slideDown();
});

Brad Christie 是对的，不过……您只需要切换即可。

$('.h2toggle').click(function () {
    $(this).siblings(':not(h2)').slideToggle();
});

Answer 3

使用三元运算符的演示：

DEMO FIDDLE

它可以作为一个漂亮的手风琴！ （如果打开了其他内容..关闭它！）

$('.h2toggle').parent().next('div').hide();
$('.h2toggle').click(function() {
    var d = $(this).parent('h2').next('div');
 check = (d.is(':visible')) ?
         (d.slideUp()) :
         ($('.h2toggle').parent('h2').next('div').slideUp()) (d.slideDown());
});

在这种情况下，三元运算符是如何工作的：

_____statement___    __is is true_      __________________is false______________________________________________
|                |   |            |    |      (do that)                                          (and that too) |
(d.is(':visible')) ? ( d.slideUp() ) : ( $('.h2toggle').parent('h2').next('div').slideUp() )   ( d.slideDown() );

...您将获得最小的脚本来获得手风琴！
编码愉快！

Answer 4

Slide 正在做一个动画，最终隐藏了元素。改用隐藏：

(function ($) {
    $(function () {
        $('.h2toggle').parent().next('div').hide();
        $('.h2toggle').click(function () {
            $(this).parent().next('div').slideToggle();
        });
    });
})(jQuery);