[英]Set Accordion to Open All Accordions
我正在构建一个非常简单的手风琴,我想设置ti以在页面加载时打开所有容器。 让它打开一个项目(或没有一个项目)是没有问题的,但是如何才能在页面加载时打开所有项目。
HTML
<aside class="accordion">
<h1 class="accTitle">My Title"</h1>
<div class="accContent">
my super cool content
</div>
<h1 class="accTitle">My Second Title"</h1>
<div class="accContent">
more super cool content
</div>
</aside>
jQuery的
jQuery(document).ready(function($){
var headers = ["H1" , "SPAN"];
$('.accordion h1.accTitle').eq(0).addClass('active');
$('.accordion div.accContent').eq(0).show();
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if($.inArray(name,headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion div.accContent").filter(function() {
if($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content and adjust bottom border if necessary
subItem.slideToggle("fast",function() {
$(".accordion .accTitle :visible:last").css("border-radius","0 0 10px 10px");
});
// $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
}
});
$('.accordion h1.accTitle').last().addClass('accTitleLast');
$('.accordion .accTitle').click(function(){
$(this).toggleClass('active').siblings('.accordion .accTitle').removeClass('active');
});
});
这是我在jsFiddle上的链接: http : //jsfiddle.net/bbyrdhouse/a6cscLjn/3/
谢谢
如果您有兴趣在加载时显示所有选项卡的内容,可以尝试以下操作:
$('#accordion .ui-accordion-content').show();
但您可能会感到一些UI挑战。
$( "#accordion" ).accordion(); $('#accordion .ui-accordion-content').show();
<html lang="en"> <head> <meta charset="utf-8"> <title>accordion demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>Section 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. 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.</p> </div> <h3>Section 2</h3> <div> <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo.</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.</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <script> </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.