Question

我想在页面加载时隐藏div，然后当用户点击页面上的任何位置时，它会显示并保持可见。

这是我的代码，但在页面加载时div不会隐藏：

$(function(){
    // body click
    $("body").click(function(){

        // element to toggle
        var $el = $(".search");

        // toggle div
        if ($el.is(":none")) {
            // fade out
            $el.fadeIn(400);
        } else {
            // fade in
            $el.fadeOut(400);                
        }

    });
});

有什么想法吗？

由于

Answer 1

尝试：

var $el = $(".search");
$($el).hide();
$(document).click(function () {
    $($el).fadeToggle();
});

CSS：

.search{display:none;}

DEMO here.

Answer 2

只需使用CSS隐藏它：;

.search {display:none}

Answer 3

如果您不想等待脚本加载到页面上以隐藏div，请添加display：none;到搜索类

.search {
    display:none;
    /*other stuff*/
}

然后你的元素将开始隐藏，直到你点击身体。

Answer 4

在页面脚本页面中编写此脚本...

$(document).ready(function(){
$(".search").css('display','')
}

Answer 5

尝试以下方法。包括$(this).off();将删除click事件，以便在单击页面时不再调用它。

HTML

<div class="search hidden"></div>

CSS

.hidden {
    display:none;
}

JS

(function () {
    $(document).click(function () {
        $(".search").removeClass('hidden').hide().fadeIn(400);
        $(this).off();
    });
})();

Answer 6

$（document）选择器指的是实际页面，所以我们可以这样做：

$(document).click(function(){



    });

这比做$（“body”）更稳定.Click（）

每次单击文档时，$（document）.click中的代码都会被激活。

所以在里面我们可以放fadeToggle（）。 fadeToggle（）会根据隐藏或可见的内容淡入或淡出某些内容。阅读更多here

现在我们有了这个：

$(document).click(function(){

    $(".search").fadeToggle();

});

但是，div在页面加载时可见。

在页面加载时自动隐藏div，我们使用这个CSS：

.search{
 display: none;   
}

将使用DOM加载的搜索类隐藏所有div。

完整演示here

希望它有所帮助!!

注意：如果您希望在单击文档一次后div保持可见，您可以将fadeToggle（）更改为fadeIn（）：

$(document).click(function(){

        $(".search").fadeIn();

    });

点击任何地方时显示和隐藏div

6 个答案: