jquery - 折叠/展开divs？ [英] jquery - Collapsing / Expanding divs?
本文介绍了jquery - 折叠/展开divs？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是jquery：
$（document）.ready （function（）{
$（'div.uforms：eq（1）> div：gt（-1）'）。hide（）;
$（'div.uforms：eq（1 ）> h3'）。click（function（）{
$（this）.next（'div：hidden'）。slideDown（'fast'）。siblings（'div：visible'）。slideUp（'快）;
}）;
}）;
并且，标记（减去所有实际在< div>< / div> ，因为它有很多表单内容...）
< div class =uforms>
< h3>标题< / h3>
< div>< / div>
< h3>标题< / h3>
< div>< / div>
< h3>标题< / h3>
< div>< / div>
< / div>
解决方案
我认为这个就是你要存档的内容
我强烈推荐jQueryUI框架。
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> jQuery UI Accordion - 默认功能< / title>
< link rel =stylesheethref =// code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\">
< link rel =stylesheethref =/ resources / demos / style.css>
< script src =https://code.jquery.com/jquery-1.12.4.js>< / script>
< script src =https://code.jquery.com/ui/1.12.1/jquery-ui.js>< / script>
< script>
$（function（）{
$（#accordion）.accordion（）;
}）;
< / script>
< / head>
< body>
< div id =accordion>
< h3>第1部分< / h3>
< div>
< p>
Mauris mauris ante，blandit et，ultrices a，suscipit eget，quam。整数
ut neque。 Vivamus nisi metus，molestie vel，gravida in，condimentum坐
amet，nunc。 Nam一个nibh。 Donec suscipit eros。南mi。 Proin viverra leo ut
odio。 Curabitur malesuada。 Vestibulum a velit eu ante scelerisque vulputate。
< / p>
< / div>
< h3>第2部分< / h3>
< div>
< p>
sed非urna。 Donec et ante。黄芪属ligu。 Vestibulum坐amet
purus。 Vivamus hendrerit，aliquet laoreet中的dolor，mauris turpis porttitor
velit，faucibus interdum tellus libero ac justo。 Vivamus非quam。在
suscipit faucibus urna。
< / p>
< / div>
< h3>第3部分< / h3>
< div>
< p>
Nam enim risus，molestie et，porta ac，aliquam ac，risus。 Quisque lobortis。美元
Phasellus pellentesque purus in massa。 Aenean在Pede。 Phasellus ac libero
ac tellus pellentesque semper。 Sed ac felis。 Sed commodo，magna quis
lacinia ornare，quam ante aliquam nisi，eu iaculis leo purus venenatis dui。
< / p>
< ul>
< li>列出第一项< / li>
< li>列出第二项< / li>
< li>列出项目三< / li>
< / ul>
< / div>
< h3>第4部分< / h3>
< div>
< p>
Cras dictum。 Pellentesque栖息地morbi tristique senectus et netus
et malesuada fames ac turpis egestas。 Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est。
< / p>
< p>
Suspendisse eu nisl。 Nullam ut libero。整数dignissim consequat lectus。
每个conubia nostra每班学费，每学年$ b $ inceptos himenaeos。
< / p>
< / div>
< / div>
< / body>
< / html>
Trying to create collapsible / expandable divs using jQuery, but it's not working for me at all... Each h3 should expand/collapse the div beneath it, and I'm not sure why this isn't working... Granted, is a heavily nested div, but I thought that the script below would find the uforms class regardless of how much other markup is on the page when it loads and then do what it's supposed to do...
Here's the jquery:
$(document).ready(function () {
$('div.uforms:eq(1)> div:gt(-1)').hide();
$('div.uforms:eq(1)> h3').click(function() {
$(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
});
});
And, the markup (minus all the stuff that's actually inside the <div></div>, because it's a lot of form stuff...)
<div class="uforms">
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
</div>
解决方案
I think this is what you are trying to achive
I highly recommend the jQueryUI framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
这篇关于jquery - 折叠/展开divs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
