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

           }
         }