使用JavaScript隱藏div

Question

我正在使用Javascript隱藏搜索框，直到單擊一個框為止。 很好

但是，第一次加載頁面時，您可以在此處看到搜索框，一旦頁面完全加載，搜索框就會消失。

在單擊我的按鈕之前，如何隱藏它而不顯示它。

這是Javascript：

<script type="text/javascript">
$(function(){
$(".search").hide();
$(".clicktosearch").on("click", function(){
    $(".search").slideToggle("600");

.search是實際的搜索框。clicktosearch是用戶必須單擊才能顯示的實際搜索框。

我唯一嘗試的是將Javascript移到html框上方，但是，不走運，現在我要在SOF上向大家提問。

Answer 1

您需要在CSS中使用display：none將其初始隱藏。 javascript僅在頁面加載后執行，因此您始終會在javascript啟動之前短暫看到它。

Answer 2

使用CSS隱藏它。

.search { display:none;}

發生這種情況的原因是在CSS和HTML生效后加載了javascript。 使用CSS將其隱藏，div隱藏之前的時間將減少。

Answer 3

您在document.ready內部具有.hide， $(function(){是$(document).ready(function() {縮寫$(document).ready(function() {

因此，只需將其放在document.ready之前，它應該可以工作...

<script type="text/javascript">
$(".search").hide();         //moved this line too here
$(function(){
$(".clicktosearch").on("click", function(){
    $(".searchr").slideToggle("600");

盡管，我個人更希望將其隱藏在CSS中。

像這樣

.search { display: none; }

Answer 4

您必須觸摸CSS。

.search {
  height: 0px;
}

然后在您的JavaScript中：

$(".clicktosearch").on("click", function(){
    $(".search").slideToggle("600");
});

Answer 5

這是您需要的：

CSS

.search { display:none;}

JS

$(".clicktosearch").on("click", function(){
    $(".search").slideToggle("600");
});

我刪除了$(".search").hide(); 因為它是不必要的，並且可能導致其他問題。 （JQuery不需要隱藏已經通過CSS隱藏的內容。）

BTW：如果只有一個匹配元素的.search ，它應該是一個id等等#search 。 .clicktosearch 。