gpt4 book ai didi

jquery-ui - jquery ui Accordion - 多个 Accordion 展开/折叠全部 - 样式问题

转载 作者:行者123 更新时间:2023-12-02 22:03:48 28 4
gpt4 key购买 nike

我正在尝试创建一个 Accordion ,只需单击一下即可展开/折叠所有部分。我还需要用户能够打开和关闭一次打开 0-n 个部分的部分。使用 stackoverflow 和 jquery 论坛上的一些讨论,这是我提出的解决方案:我已经将每个部分实现为它自己的 Accordion ,其中每个部分都设置为 collapsible = true。

<html>
<head>
<title>Accordion Test</title>

<script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>

<link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css" type="text/css" />
<link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
</head>

<body>
<a onClick="expandAll()">Expand All</a>
<br>
<a onClick="collapseAll()">Collapse All</a>
<div id="accordion1" class="accord">
<h5><a href="#">section 1</a></h5>
<div>
section 1 text
</div>
</div>

<!-- orders section -->
<div id="accordion2" class="accord">
<h5><a href="#">section 2</a></h5>
<div>
section 2 text
</div>
</div>

<!-- section 3 -->
<div id="accordion3" class="accord">
<h5><a href="#">section 3</a></h5>
<div>
section 3 text
</div>
</div>

<!-- section 4 -->
<div id="accordion4">
<h5><a href="#">section 4</a></h5>
<div>
section 4 text
</div>
</div>


</body>
</html>


<script type="text/javascript">

$(function() {
$('#accordion1').accordion({
header: 'h5',
collapsible: true,
autoHeight: false
});
});
$(function() {
$('#accordion2').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion3').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion4').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});

</script>

<script type="text/javascript">
$(document).ready(function() {

})

function expandAll() {
alert("calling expandAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":not(:has(.ui-state-active))")
.accordion("activate", 0);
}

function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
}

</script>

我遇到的问题是,当我单击打开部分的标题时,该部分会按预期折叠,但标题仍然具有“ui-state-focus”类,直到我单击该部分的其他位置页。因此,我在用户界面中看到的是刚刚关闭的部分的标题与我的悬停效果具有相同的背景颜色,直到我单击其他位置,它才会切换为“默认,不聚焦”颜色。

此外,当我使用“全部折叠”链接时,所有内容在 Firefox 中看起来都很棒。在 IE 中,最后一个部分标题具有相同的悬停焦点颜色。

有什么建议吗?我是否需要以某种方式强制 Accordion 在关闭时失去焦点?我该如何实现这一目标?

最佳答案

在尝试覆盖页面上的 jquery-ui 样式,并尝试破解 Accordion javascript 以删除 ui-state-focus 类后,出现了一个简单的解决方案。

因为当我单击页面上的其他位置时,我的页面显示了预期的行为,所以我使用了 Blur() 来失去焦点。

$(document).ready(function() {
// forces lose focus when accordion section closed. IE and FF.
$(".ui-accordion-header").click(function(){
$(this).blur();
});

})

为了解决 IE 中的折叠所有问题,我在 CollapseAll() 方法中添加了 1 行。

function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
$(".ui-accordion-header").blur();
}

关于jquery-ui - jquery ui Accordion - 多个 Accordion 展开/折叠全部 - 样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4868320/

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