如何使用 Jquery 使元素出现和消失。答案

【问题标题】：How can I make an element appear and disappear using Jquery.如何使用 Jquery 使元素出现和消失。
【发布时间】：2014-04-14 19:59:57
【问题描述】：

我想做这样的事情：

$(document).ready(function(){
    if($('.undermenu').css('display','block')){
        $('#menu').click(function(){
            $('.undermenu').css('display','none');
        });
    }
    else{
        $('#menu').click(function(){
            $('.undermenu').css('display','block');
        });
    }
});

此代码不起作用，但是否有任何 Jquery“效果”或任何我可以用来隐藏/取消隐藏的东西。例如，是否有办法检查显示是否设置为无或阻止？谢谢。

【问题讨论】：

标签： javascript jquery html css dom

【解决方案1】：

只需使用toggle():

$('#menu').click(function() {
    $('.undermenu').toggle();
});

虽然您的if($('.undermenu').css('display','block')) 不起作用的原因是因为您将元素的display 属性设置为block，而不是获取display 属性和测试它，这将是：

if ($('.undermenu').css('display') =='block')

如果您真的想使用if 来测试当前显示，那么在修改演示文稿之前，您必须在点击处理程序中执行此操作（否则它只会在 DOMReady 上运行一次，而不是每次时间）：

$('#menu').click(function(){
    if ($('.undermenu').css('display') == 'block') {
        $('.undermenu').hide();
    }
    else {
        $('.undermenu').show();
    }
});

或者，如果您想冒着激怒同事的风险，您可以稍微提高一下：

$('#menu').click(function(){
    var undermenu = $('.undermenu');
    undermenu[undermenu.css('display') == 'block' ? 'hide' : 'show']();
});

参考资料：

css()。
toggle()。

【讨论】：

非常感谢，希望对您有所帮助！ :)
顺便说一句，如果您认为您的问题已得到解答，请考虑单击对您最有帮助的答案旁边的灰色复选标记（不一定是这个）。如果您的问题没有得到解答，请随时编辑您的问题，以解决迄今为止提供的答案中的任何缺陷。 :)

【解决方案2】：

你在你的条件上使用了 setter ：

// This line update .undermenu to display it and return true (return $('.undermenu'), so true)
if($('.undermenu').css('display','block')){

但你必须得到值，并测试

if($('.undermenu').css('display') === 'block'){

而且你的代码概念很糟糕。如果你这样做了，如果.undermenu显示或不显示，你测试文档是否准备就绪，并且你将一个函数放到点击触发器（显示或隐藏..）但是！当你的 .undermenu 发生变化时，你已经有了相同的触发器（显示或隐藏，他永远不会改变）..

因此您需要为每次点击设置触发器并测试触发器上的值（显示与否）：

$(document).ready(function(){
    $('#menu').click(function(){
        if($('.undermenu').css('display') === 'block'){
           $('.undermenu').hide();
        }
        else {
           $('.undermenu').show();
        }
    });
});

【讨论】：

【解决方案3】：

在 jquery 上存在：

$("#element_id").show();

$("#element_id").hide();

你也可以使用：

$("#element_id").fadeIn();

$("#element_id").fadeOut();

这个显示和隐藏带有淡入淡出效果的元素。

可以查询元素是否隐藏：

if($("#element_id").is(":hidden")){
    $("#element_id").show():
}
else{
    $("#element_id").hide();
}

【讨论】：

【解决方案4】：

你要找的是.toggle()

$("div").click(function () {
    $("img").toggle("slow", function () {
    // Animation complete.
    });
});

这是一个小提琴：http://jsfiddle.net/FQj89/

【讨论】：

【解决方案5】：

您可以将 if 语句放在函数中，这样您就不会重复自己。您也可以使用 toggle();类型的东西取决于你在做什么。 ---

$('#menu').click(function(){

    if ( $('.undermenu').is(':visible') ) {

        $('.undermenu').hide();

     else {

        $('.undermenu').show();

    }

});

这也是一个好方法，但取决于你在做什么，一个可能比另一个更好。

if ( $('.undermenu').css('display') === 'block' ) { // do something }

【讨论】：