2014-01-12 56 views
1

我正在使用Javascript來隱藏搜索框,直到點擊一個框。這工作正常。使用javascript隱藏div

但是,當第一次加載頁面時,您可以在那裏看到搜索框,然後在頁面完全加載後它會消失。

我怎樣才能使它隱藏,而不是顯示在所有我的按鈕被點擊,直到..

這是JavaScript:

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

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

我試過的唯一的東西就是把html上面的Javascript動起來,但是,沒有運氣,現在我問你們所有的SOF。

+0

錯字? $(」搜索 「)的slideToggle(」 600" )。 – tilda

+0

只需在最初隱藏的元素上使用CSS「display:none」即可。 –

回答

0

這是你所需要的:

CSS

.search { display:none;} 

JS

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

我刪除了$(".search").hide();,因爲它沒有顯示並可能導致其他問題。 (JQuery不需要隱藏已經通過CSS隱藏的東西。)

順便說一句:如果只有一個元素匹配.search,它應該確實是id#search.clicktosearch也是如此。

0

使用css隱藏它。

.search { display:none;} 

發生這種情況的原因是在css和HTML生效之後JavaScript會被加載。 使用CSS隱藏它,div隱藏之前的時間滯後將更少。

0

你有.hide的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; } 
0

你得觸摸CSS。

.search { 
    height: 0px; 
} 

然後,在JavaScript:

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

您需要使用 顯示:無 在CSS最初隱藏它。後在頁面加載,以便您始終在JavaScript踢之前看到它簡單的JavaScript僅執行