gpt4 book ai didi

jquery - 在可扩展
中使用 jquery 创建可扩展

转载 作者:行者123 更新时间:2023-11-28 05:52:03 25 4
gpt4 key购买 nike

不久前,我在尝试构建可扩展的 Div-Container 时发现这段代码可以创建可扩展/可折叠的代码,到目前为止,它对我产生了奇迹(这里是没有经验的业余爱好设计师)。

现在我想在其中一个中插入一个可扩展的 div。我面临的问题是我无法弄清楚如何按顺序更改功能,因此它会自动重新调整第一个可扩展 div 的外部高度。我这里有一个它应该是什么样子的示例(如果我展开 Collapsible 1-3,它也应该展开 Collapsible 1 以便所有内容都可见):

可折叠 1

  • 可折叠 1-1
  • 可折叠 1-2
  • 可折叠 1-3

我使用的代码可以在这里找到:

HTML:

<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>

CSS:

#wrapper {
background: #ccc;
overflow: hidden;
transition: height 200ms;
}

JS:

$(function() {
var b = $("#button");
var w = $("#wrapper");
var l = $("#list");

w.height(l.outerHeight(true));

b.click(function() {

if(w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}

});
});

最佳答案

您可以使用 .slideDown.slideUp 而不是计算高度。

$(document).ready(function() {
$('#button').click(function() {
$('#wrapper').toggleClass('open').slideToggle(200);
});
});
#wrapper {
background: #ccc;
overflow: hidden;
/*transition: height 200ms;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>

关于jquery - 在可扩展 <div> 中使用 jquery 创建可扩展 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37274810/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com