jquery - 折叠/展开 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1552572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - Collapsing / Expanding divs?
提问by n00b0101
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, isa 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...
尝试使用 jQuery 创建可折叠/可扩展的 div，但它根本不适合我......每个 h3 应该扩展/折叠它下面的 div，我不确定为什么这不起作用......当然， 是一个严重嵌套的 div，但我认为下面的脚本会找到 uforms 类，而不管页面加载时页面上有多少其他标记，然后执行它应该执行的操作...
Here's the jquery:
这是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></div>.
<div class="uforms">
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
</div>
采纳答案by Ben Shelock
I think thisis what you are trying to achive
我想这就是你想要达到的
I highly recommend the jQueryUI framework.
我强烈推荐 jQueryUI 框架。
<!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>
回答by Justin Johnson
You're selectors are just wrong. You don't need eqor gt
你的选择器是错误的。你不需要eq或gt
$(document).ready(function () {
$('.accordion > div').hide();
$('.accordion> h3').click(function() {
$(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
});
});
I would change the class identified to something more general so you can reuse this in other places.
我会将标识的类更改为更通用的类，以便您可以在其他地方重用它。
<div class="accordion">
<h3>Heading</h3>
<div>cactuspants! <div>I am an inner div</div></div>
<h3>Heading</h3>
<div>Hats</div>
<h3>Heading</h3>
<div>Hi!</div>
</div>
Also, others have suggested that you just use jQueryUI, which is completely valid, unless you're not already using it orintend to use it for additional features. A s3 line function beats including an addition 32K library (the size of the minimally necessary components in a customized build).
此外，其他人建议您只使用 jQueryUI，这是完全有效的，除非您尚未使用它或打算将其用于其他功能。一个 s3 线函数节拍包括一个额外的 32K 库（自定义构建中最少必要组件的大小）。
回答by twilliams
I just use the accordion widget with just one divinside.
我只使用内部只有一个div的手风琴小部件。
$("#accordion").accordion({
active: false,
collapsible: true
});
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>test 1 2 3</p>
</div>
</div>
Include this css link:
包括这个 css 链接：
link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
