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>

如何使用onclick()功能隐藏并显示此手风琴的标题？

另外，我确定使用重复的id会给出html验证错误，
我应该如何避免重复ID？

Answer 1

只需添加此CSS

即可

.ui-state-active { display:none }

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

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 = "";
}

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

Answer 3

1）您可以使用this answer.

中的代码检测手风琴是否打开

2）如果在整个代码中重复，则应使用类而不是id here.

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

           }
         }

jQuery accordion onclick（）：hide / show header

5 个答案: