如何使用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"效果"或者我可以用来隐藏/取消隐藏的任何东西.例如,是否存在检查显示是否设置为无或阻止的方法？谢谢.

Answer 1

只需使用toggle():

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

虽然你的原因if($('.undermenu').css('display','block'))没有工作是因为你的设置display元素(一个或多个)的财产block,而不是获得的display财产并对其进行测试,具体做法是:

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

如果你真的想用一个if来测试当前的显示,那么在修改演示文稿之前,你必须在click处理程序中执行它(否则它只会在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().