gpt4 book ai didi

javascript - 设置 Accordion 打开所有 Accordion

转载 作者:行者123 更新时间:2023-12-03 11:13:11 27 4
gpt4 key购买 nike

我正在构建一个非常简单的 Accordion ,我想设置 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>

关于javascript - 设置 Accordion 打开所有 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27465219/

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