javascript - 如何使用 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要测试当前显示，在修改演示文稿之前，您必须在点击处理程序内部执行此操作(否则它只会在 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() .