Question

我有一个基本的jquery手风琴，显示一个列表。在当前场景中，我希望通过单击按钮隐藏一些内容，并在再次单击按钮时再次显示。例如

1) Title 1
2) Title 2
3) Title 3
4) Title 4

<input type='button' value='show/hide'>

我希望在用户点击按钮时隐藏和显示标题2.

我用过

document.getElementById("sec2").style.display == "block"

这样做，手风琴变得隐藏和可见，但结构受到了损害。即“标题2”打开时可见，而我希望它是封闭的。

标准Jquery Accordian。

<div id="accordion">
  <h3 id='sec1'>Section 1</h3>
  <div id='div1'>
    <p>
    Title 1.
    </p>
  </div>
  <h3 id='sec2'>Section 2</h3>
  <div id='div2'>
    <p>
     Title .
    </p>
  </div>
</div>

Answer 1

您应该尝试以下方法（可折叠选项为true）：

$('#accordion').accordion( "activate" , 2)

在此处查看更多内容：http://docs.jquery.com/UI/API/1.8/Accordion

Answer 2

试试这个：

<input type='button' id="myButton" value='show/hide'>

$("#myButton").click(function () {
  $("#sec2").toggle();
  $("#accordion").accordion("option", "active", false);
  //or use $("#accordion").accordion("option", "active", index); to select the option you want to be active
});

Answer 3

您可以在jquery之前使用toggle而不是 1.9.x ：请参阅Demo

$("#btnToggle").toggle(function(){
    $("#div2>p").hide();
}, function(){
    $("#div2>p").show();
});

Answer 4

嘿伙计们感谢您的回复，但一切似乎都没有用，所以我终于决定静静地解决这个问题了。以下是我的尝试。

$(function() {
  for(var i = 3; i>=0; i--)
  {
    $( "#accordion" ).accordion({
     active: i,
    });
  }
});

这最终可以解决问题，关闭所有div并将顶部打开，并且动画效果也很好......;）

以手风琴显示和隐藏内容

4 个答案: