jQuery accordion onclick( )：隐藏/显示标题
jQuery accordion onclick( )：隐藏/显示标题
提问于 2013-10-31 21:39:18
我正在使用jQuery accordion插件。
当单击文本"Accordion“时，它会展开并显示内容。现在，我还有一个“关闭”按钮在手风琴的底部关闭它，这也是它应该工作的。
现在的要求是，当我单击"Accordion“时，它应该展开并隐藏文本"Accordion"，当使用"Close”关闭时，它应该再次显示。
如何做到这一点呢？到目前为止，我有：
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
});
</script>和
<div id="accordion">
<h3>Accordion</h3>
<div class="accordionBg">
<p>...text here...</p>
<p>...text here...</p>
<div id="accordion">
<h4>Close</h4>
</div>
</div>
</div>- 如何使用
onclick()函数隐藏和显示此accordion的标题？
另外，我确信使用重复id会导致html验证错误，
- 我应该如何保持安全，避免重复id?
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-10-31 21:44:57
只需添加此CSS
.ui-state-active { display:none }
这将隐藏Accordian文本，并在单击close时显示它。
Stack Overflow用户
发布于 2013-10-31 21:43:31
你是说标题“手风琴”？你应该给它一个ID：
<h3 id="accordionHeader">Accordion</h3>然后在某个按钮或其他地方，添加一个onclick方法
<button onclick='hideHeader()'></button>最后，编写hideHeader方法：
function hideHeader() {
$("#accordionHeader").innerHTML = "";
}此方法将使h3块为空，实质上是隐藏它。
如果你有多个手风琴需要被不同的按钮隐藏，给它们分配不同的ID，如"accordionHeader1"，"accordionHeader2“等。
如果要在一个查询中隐藏多个折叠面板标题，请使用类而不是If：
<h3 class="accordionHeader">Accordion</h3>
function hideHeaders() {
$(".accordionHeader").innerHTML = "";
}此代码将对“类”为accordionHeader的所有元素应用相同的更改。
Stack Overflow用户
发布于 2013-10-31 21:44:27
1)可以使用this answer.中的代码检测折叠是否打开
2)如果id在整个代码中重复，那么应该使用类而不是id，就像文档中记录的here.一样
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19708075
复制相关文章
相似问题