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“效果”或我可以用来隐藏/取消隐藏的任何内容。例如，是否存在检查显示是否设置为无或阻止的方法？感谢。

Answer 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()。

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

Answer 3

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

Answer 4

您正在寻找的是.toggle()

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

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

Answer 5

您可以将if语句放在函数中，这样您就不会重复自己。你也可以使用toggle（）;根据你在做什么来输入东西。 ---

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

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

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

     else {

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

    }

});

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

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

如何使用Jquery使元素显示和消失。

5 个答案: