隱藏顯示的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(); 
    }); 
});