Question

我想部分显示一个列表然后当点击一个按钮时我想改变按钮的类并使用div的全高显示完整列表，然后再次点击按钮时我希望它从最初的揭示开始，而不是隐藏整个事物。

HTML：

<section id="newsletters">
<h4><a href="#rss"></a><span>Related</span> Button</h4>
    <nav>
        <ul>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>      
        </ul>
    </nav>
<a class="hide" href="#">Show / Hide
</a></section>

Jquery的

 $('section#newsletters .hide').click(function() {
    $('section#newsletters nav').toggle(400);
    return false;
   });

Answer 1

您必须创建自己的切换器。简单直接：

var toggle = true, oldHeight = 0;

$('section#newsletters .hide').click(function(event) {
    event.preventDefault();

    var $ele = $('section#newsletters nav');
    var toHeight = ((toggle = !toggle) ? oldHeight : 20);

    oldHeight = $ele.height();
    $ele.animate({ height: toHeight });

});

其中“20”是向上滑动时切换到的高度（以像素为单位）。

小提琴： http://jsfiddle.net/QV38D/

Answer 2

这次讨论引发了我找到几乎完全相同问题的解决方案。以下是我所使用的内容，以及我所需要的内容。

可以使用三元运算符设置高度变量，然后在animate（）上使用它。可以为animate（）设置更多选项我只包含高度。您可以使用相同的内容来更改显示/隐藏文本。

$('section#newsletters .hide').click(function() {
  $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
  var height = $('section#newsletters nav').height() == '[original height]' ? '[new height]' : '[original height]';
  $('section#newsletters nav').animate({height:height};
});

所以，例如，如果你想从50px变为100px然后再变回50，你会做：

$('section#newsletters .hide').click(function() {
  $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
  var height = $('section#newsletters nav').height() == '50' ? '100' : '50';
  $('section#newsletters nav').animate({height:height};
});

Answer 3

您可能需要使用animate并自行编码切换机制。以下内容：

$("section#newsletters .hide").click(function () {
    $("section#newsletters nav").animate({ height: "100px"}, 400,
        function() { $("section#newsletters").removeClass("hide").addClass("show"); }
    );
});
$("section#newsletters .show").click(function () {
    $("section#newsletters nav").animate({ height: "1000px"}, 400,
        function() { $("section#newsletters").removeClass("show").addClass("hide"); }
    );
});

100px和1000px分别是折叠和展开列表的高度。

通过设置动画高度显示内容（不隐藏所有内容）

3 个答案: