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

Question

我想做类似这样的事情：

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

这段代码无法正常工作，但是否有任何Jquery“效果”或其他方法可以用于隐藏/显示。 例如，是否有一种方法可以检查显示是否设置为none或block？ 谢谢。

- user221146

Answer 1

只需使用toggle()函数：

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

你的if($('.undermenu').css('display','block'))没有起作用的原因是你将元素的display属性设置为block，而不是获取它并测试它，正确的写法应该是：

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

如果你真的想要使用一个if来测试当前的显示状态，在修改演示之前，你需要将其放在点击处理程序内部（否则它只会在DOM准备时运行一次，而不是每次都运行）：

$('#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() 方法。

- David Thomas

---

非常感谢，希望我能有所帮助！ :) - David Thomas

顺便说一句，如果你觉得你的问题已经得到了解答，请考虑点击灰色勾号标记所在的答案（不一定是这个答案）。如果您的问题没有得到解答，请随意编辑您的问题，以处理目前提供的任何答案中存在的缺陷。 :) - David Thomas

Answer 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();
        }
    });
});

- Arthur

Answer 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();
}

- Fiambre

Answer 4

你要找的是 .toggle()。

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

这是一个 JSFiddle：http://jsfiddle.net/FQj89/

- Dryden Long

Answer 5

你可以把if语句放在函数中，这样就不用重复自己了。根据你要做的事情，你可能还可以使用toggle()之类的东西。

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

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

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

     else {

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

    }

});

这也是一种不错的方式，但具体取决于你要做什么，有时候另一种方式可能更好。

if ( $('.undermenu').css('display') === 'block' ) { // 做些什么 }

- sheriffderek