javascript - jQuery 手风琴 onclick() : 隐藏/显示标题

Question

我正在使用 jQuery 手风琴插件。

当点击文本“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>

1. 如何使用onclick()函数隐藏和显示这个手风琴的标题？

   另外，我确定使用重复的 id 会产生 html 验证错误，

2. 我应该如何避免重复 ID？

Answer 1

只需添加这个CSS

.ui-state-active { display:none }

这将隐藏 Accordian 文本并在您单击关闭时显示它。

Answer 2

你的意思是标题“手风琴”？你应该给它一个ID：

<h3 id="accordionHeader">Accordion</h3>

然后在某个按钮或其他任何地方，添加一个 onclick 方法

<button onclick='hideHeader()'></button>

最后，编写 hideHeader 方法：

function hideHeader() {
    $("#accordionHeader").innerHTML = "";
}

此方法将使 h3 块为空，实质上是隐藏它。

如果您有多个手风琴需要通过不同的按钮隐藏，请为它们分配不同的 ID，即“accordionHeader1”、“accordionHeader2”等。

如果您想用一个查询隐藏多个手风琴标题，请使用类而不是 ID：

<h3 class="accordionHeader">Accordion</h3>
function hideHeaders() {
    $(".accordionHeader").innerHTML = "";
}

此代码将对“类”为accordionHeader 的所有元素应用相同的更改。

Answer 3

1）您可以使用此答案中的代码检测手风琴是否打开。

2）如果它在整个代码中重复，则应使用类而不是 id，如此处所述。

Answer 4

给你 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>

Answer 5

根据 jQuery 文档，

“如果手风琴当前折叠，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

           }
         }