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中最初隐藏它。 javascript只在页面加载后执行，所以在javascript启动之前你总是会看到它。

Answer 2

使用css隐藏它。

.search { display:none;}

发生这种情况的原因是在css和HTML生效后加载javascript。使用CSS隐藏它，div隐藏之前的时间间隔会更短。

Answer 3

你有.hide文件.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。

用javascript来隐藏div

5 个答案: