代码之家 › 专栏 › 技术社区 › stevendesu

用jQuery扩展内容(手风琴技术)…快速提问

accordion dom javascript

stevendesu · 技术社区 · 14 年前

假设我们有两个 div 元素:

<body>
    <div id="lorem1" style="display:block; height:400px;">
        Lorem ipsum...
    </div>
    <div id="lorem2" style="display:hidden;">
        dolor sit amet...
    </div>
</body>

如果我们想用手风琴的效果来缩小第一个 分区 我假设我们有以下简单的逻辑:

迭代地减小 #lorem1 直到达到0
#洛雷姆1 到 display:none;
#lorem2 到 display:block; height:0;
#洛雷姆2

lorem2 可能超过400像素高。或者,如果小于400像素,则页面上的任何背景色/图像或其他元素都可能看起来不对。

那么我们该如何决定何时停止我们的手风琴?

2 回复 | 直到 14 年前

pex 14 年前

使用jQuery,您可以使用 toggle 属性:

$('#lorem').animate({
  height: 'toggle'
});

我相信其他js库也提供了类似的可能性。

:另一种方法是设置对象的动画,直到 auto . 或者不要通过CSS隐藏它,通过JS获取对象的维度,然后使用JS隐藏它。现在你知道了再次显示它的维度。

banjomonster 14 年前

我想.slideDown()和.slideUp()会帮你: http://api.jquery.com/slideDown/

推荐文章

softyoda yoann · 单击手风琴图像后保持DIV活动

6 年前

ankur · 手风琴安全壳工作不正常

6 年前

hud · 用于更新多个表单的嵌套jquery accordion

6 年前

J Doe · 单击另一个选项卡时手风琴关闭选项卡

6 年前

Bob Ramsey · 需要关于延迟加载mat手风琴内容的帮助

6 年前

Junior Gantin · 如何将图标添加到ngx引导手风琴组标题中?

6 年前

Arthur Decker · 如何使用角材质使用手风琴选择单选按钮

6 年前

QA_Col · 在相同的JSF中从p:accordionPanel获取activeIndex

7 年前

LucyTurtle · 手风琴表+日期范围选择器+AJAX

7 年前

asif · 引导手风琴显示点击顶部的内容

7 年前