使用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 。