隐藏显示的div

Question

请检查出的小提琴：

LINK HERE

我想隐藏在页面加载的DIV，并使用ASCII码系统字符为向上和向下箭头上LINK，以便点击div滑动。工作正常，但我想要反向功能，以便它在页面加载时隐藏。试图改变可见性隐藏起来，没有工作笑

像：

显示＆＃x25BC;

and

Hide＆＃x25B2;

Answer 1

我只是改善安德鲁先生的代码：

$(document).ready(function() { 
    $("#setup").click(function() { 
     $("#closeable").slideToggle(function() { 
      if ($(this).is(":visible")) { 
       $("#setup").text("Hide Content ▲"); 
      } 
      else { 
       $("#setup").text("Show Content ▼"); 
      } 
     }); 
    }); 
}); 

现场演示：http://jsfiddle.net/de4FE/26/

Answer 2

如果您希望它最初不可见，您可以简单地将style="display:none"添加到<div>元素。

Answer 3

$(document).ready(function() { 

    $("#closeable").slideToggle(); 
    state = "hide"; 

    $("#setup").click(function() { 
     $("#closeable").slideToggle(); 

     if (state == "hide") { 
      $("#setup").text("Show Content"); 
      state == "show" 
     } 
     else { 
      $("#setup").text("Hide Content"); 
      state == "hide" 
     } 

    }); 
}); 

Answer 4

如何：

$(document).ready(function() { 
    $("#setup").click(function() { 
     $("#closeable").slideToggle(function() { 
      if ($(this).is(":visible")) { 
       $("#setup").text("Hide Content"); 
      } 
      else { 
       $("#setup").text("Show Content"); 
      } 
     }); 
    }); 
}); 

一定要检查在回调函数的内容的可见性（以确保内容是可见的）。

更新了例：http://jsfiddle.net/de4FE/16/

Answer 5

好吧，我测试了，这是什么工作。

请注意，我们在ready（）函数的开头添加了$("#closeable").hide();，因此隐藏了我们的对象div。

其次我们在测试后移动$("#closeable").slideToggle();。您遇到的问题是slideToggle()作为线程执行，并且代码的其余部分仍在执行，因此它仍然部分可见或仅对is(':visible')语句可见。首先通过测试，我们消除竞争条件。

干杯

$(document).ready(function() { 

    $("#closeable").hide(); 

    $("#setup").click(function() { 

     if($("#closeable").is(":visible")) { 
      $("#setup").text("Show Content ▼"); 
     } 
     else { 
      $("#setup").text("Hide Content ▲"); 
     } 

     $("#closeable").slideToggle(); 
    }); 
});