Question

我有问题要显示并隐藏一些div。我唯一拥有的是一个班级。我们需要点击，显示或隐藏父h2下方的div 我不能在h2或div中添加一些classe（这来自一些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>

现在我有类似下面的代码。但现在，当页面将被加载。围绕“一些文字”＆amp;我们会隐藏“更多文字”。但你可以看到它从一开始就没有被隐藏。它正在向上滑动。

它应该从头开始隐藏（带文本的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

幻灯片正在制作动画，最终隐藏了该元素。改为使用隐藏：

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

Answer 4

使用三元运算符演示：

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

......你会得到最小的手风琴脚本！快乐的编码！

用jquery显示和隐藏div

4 个答案:

DEMO FIDDLE