我是新来javascript
和jquery
,我试图实现使用jquery
手风琴,我试图做的是在页面上加载第一个面板应该打开和其余面板应关闭,当我点击下一节第一个面板的第二个面板应该打开,首先应该关闭,当我点击第二个面板的下一个部分时,第一个和第二个应该关闭,当我点击最后一个面板时首先应该打开,剩下的应该关闭。 这是我的代码JsFiddlejQuery折叠功能
回答
你为什么不试试jQuery UI,
这里Reference 下面是一些代码,
<div id="accordion">
<h3>Section 1</h3>
<div>
<button id="first">Next Session</button>
<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>
<button id="second">Next Session</button>
<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>
<button id="third">First Session</button>
<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>
</div>
jQuery的:
$(function() {
$("#accordion").accordion({ active: 0 });
$("#first").click(function(){
$("#accordion").accordion("option", "active", 1);
});
$("#second").click(function(){
$("#accordion").accordion("option", "active", 2);
});
$("#third").click(function(){
$("#accordion").accordion("option", "active", 0);
});
});
更新:
我创建了按照不jQuery UI的http://jsfiddle.net/dhana36/UYbMH/8/ JsFiddle
$("#nextsection").click(function(){
$(".panel__body:eq(0)").toggle('slow');
$(".panel__body:eq(1)").toggle('slow');
});
$("#nextsection1").click(function(){
$(".panel__body:eq(1)").toggle('slow');
$(".panel__body:eq(2)").toggle('slow');
});
$("#nextsection2").click(function(){
$(".panel__body:eq(2)").toggle('slow');
$(".panel__body:eq(0)").toggle('slow');
});
感谢您的查询ui实现,但我只能使用jquery。 .. – user3282116
@ user3282116我创建了按照你所说的尝试这个http://jsfiddle.net/dhana36/UYbMH/8/ – dhana
如何创建一个通用的方式来实现这个?如果我有5个面板,我是否需要编写5个点击功能? – user3282116
- 1. 引导折叠 - jquery“折叠全部”功能
- 2. Jquery展开和折叠功能
- 3. 使用jquery展开,折叠功能
- 4. 带折叠功能和附加功能?
- 5. 球拍折叠功能
- 6. vim中的折叠功能
- 7. Javascript折叠延迟功能
- 8. netbeans中的折叠功能
- 9. jQuery可折叠
- 10. Gridview中的展开 - 折叠功能
- 11. Scala的折叠式咖喱功能
- 12. A和在vim折叠的bash功能
- 13. 使用折叠使功能更优雅
- 14. 基于键的功能折叠
- 15. 应用折叠功能在F#
- 16. 类型不匹配的折叠功能
- 17. Twitter bootstrap手风琴折叠功能
- 18. LWUIT中的展开和折叠功能
- 19. 功能上面的折叠 - 单撇子
- 20. 多次使用展开/折叠功能
- 21. 具有单个jQuery功能的独特可折叠文本
- 22. 需要jQuery的修改现有展开折叠功能
- 23. jquery代表嵌套的ul元素展开/折叠功能
- 24. jquery展开/折叠?
- 25. 展开/折叠jQuery
- 26. 用JQuery折叠DIV
- 27. 堆叠功能不JQuery的
- 28. 如何将ui.bootstrap折叠功能设置为在页面加载时折叠?
- 29. scala:折叠元组成功
- 30. Aptana折叠/折叠方法?
到目前为止您尝试了什么?你的小提琴没有任何JS。你应该看看[http://jqueryui.com/](http://jqueryui.com/),因为它有一个内置的手风琴功能。 – badAdviceGuy
只想使用jquery而不是jquery ui – user3282116
[http://jsfiddle.net/UYbMH/4/]抱歉,我对jquery完全陌生.. – user3282116