javascript jQuery 手风琴 onclick()：隐藏/显示标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19708075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery accordion onclick( ) : hide/show header
提问by CodeMonk
I'm using jQuery accordion plugin.
我正在使用 jQuery 手风琴插件。
When clicked on the text "Accordion", it expands and show the content, as it should. Now, I also have a "Close" button at the bottom of accordion to close it and that also works as it should.
当单击文本“手风琴”时，它会展开并显示应有的内容。现在，我在手风琴底部还有一个“关闭”按钮来关闭它，它也可以正常工作。
Now the requirement is, when I click on "Accordion", it should expand and hide that text "Accordion" and it should show again when closed using "Close".
现在的要求是，当我单击“手风琴”时，它应该展开并隐藏该文本“手风琴”，并在使用“关闭”关闭时再次显示。
How to achieve that? So far I have:
如何做到这一点？到目前为止，我有：
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
});
</script>
and
和
<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>
How can I use
onclick()function to hide and show the header of this accordion?Also, I'm sure using duplicate id gives html validation error,
How should I stay safe from duplicating id?
如何使用
onclick()函数隐藏和显示此手风琴的标题？另外，我确定使用重复的 id 会导致 html 验证错误，
我应该如何避免重复 ID？
采纳答案by Nick R
Just add this CSS
只需添加这个 CSS
.ui-state-active { display:none }
.ui-state-active { display:none }
This will hide the Accordian text and show it when you click close.
这将隐藏手风琴文本并在您单击关闭时显示它。
回答by Ruben Verschueren
give you h3 the id title and change your script to this:
给你 h3 id 标题并将你的脚本更改为：
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
$("#title").on( "click", function() {
$("#title").hide();
return false;
});
$("#accordion").on("click", function(){
$("#title").show();
return false;
});
});
</script>
回答by Sathesh
As per the jQuery documentation,
根据 jQuery 文档，
"If the accordion is currently collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects."
“如果手风琴当前已折叠，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果手风琴正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。”
$("selector").accordion(
{
beforeActivate: function( event, ui ) {
if(ui.newHeader.length == 0 && ui.newPanel.length==0){
//content is closing
}
else{
//content is opening
}
}
回答by Alex Walker
You mean the heading "Accordion"? You should give it an ID:
你的意思是标题“手风琴”？你应该给它一个ID：
<h3 id="accordionHeader">Accordion</h3>
and then in some button or whatever, add an onclick method
然后在某个按钮或其他地方，添加一个 onclick 方法
<button onclick='hideHeader()'></button>
Finally, write the hideHeader method:
最后，编写 hideHeader 方法：
function hideHeader() {
$("#accordionHeader").innerHTML = "";
}
This method will make the h3 block empty, essentially hiding it.
此方法将使 h3 块为空，从本质上将其隐藏。
If you have multiple accordions that need to be hidden by different buttons, assign them different IDs, i.e. "accordionHeader1", "accordionHeader2" etc.
如果您有多个手风琴需要通过不同的按钮隐藏，请为它们分配不同的 ID，即“accordionHeader1”、“accordionHeader2”等。
If you want to hide multiple accordion headers with one query, use classes instead of IDs:
如果您想通过一个查询隐藏多个手风琴标题，请使用类而不是 ID：
<h3 class="accordionHeader">Accordion</h3>
function hideHeaders() {
$(".accordionHeader").innerHTML = "";
}
This code will apply the same change to ALL elements whose "class" is accordionHeader.
此代码将对“类”为手风琴头的所有元素应用相同的更改。
