Question

我有这样的HTML：

<div id='hidden-section'>
  content is hidden
</div>
<div id='mainleft-content'>
  content is visible
</div>

<div id="expand-hidden">Button Expand + </div>

我使用slideToggle来扩展/折叠如下代码，但它不起作用：

$(document).ready(function(){
    $("#hidden-section").hide();
    $("#expand-hidden").click(function(){
        $("#hidden-section").slideToggle();
            if($("#mainleft-content").is(":hidden")) {
                $("#mainleft-content").visible();
            }
            else{
                $("#mainleft-content").hide();
                }
    });

});

我想：当我点击Button Expand时，隐藏的内容（hidden-section）可见，mainleft-content被隐藏。当我再次点击时，“隐藏部分”被隐藏，mainleft-content可见。

Answer 1

与slideToggle()相同，您可以使用toggle()切换元素的显示。无需使用if条件

$(document).ready(function () {
    $("#hidden-section").hide();
    $("#expand-hidden").click(function () {
        $("#hidden-section").stop(true, true).slideToggle();
        $("#mainleft-content").toggle();
    });
});

演示：Fiddle

Answer 2

jQuery没有visible()函数，您可能需要show()

更改

$("#mainleft-content").visible();

到的

  $("#mainleft-content").show();

使用slideToggle展开div

2 个答案: