Question

我正在尝试检测元素是否可见，然后为其分配函数：

使用按钮显示菜单按钮后，我想点击任意位置并隐藏meny并重新显示按钮。

if ($('ul.site-nav.actual-navigation').css('display') == 'block') {
    $(document).click(function() {
        $('ul.site-nav.actual-navigation').hide();
        $('button.nav-mobile-switch').show();
    });

}

我也尝试了$('element:visible')和$('element').is(':visible')方法。

我在某地读过psuedo选择器:visible不能用于函数，但是当我点击任何地方时，这里的例子并没有隐藏元素。

我做错了什么？

http://jsfiddle.net/Kyle_Sevenoaks/yuAhb/

Answer 1

您只是在首次加载页面时检查可见性当菜单实际可见时，没有什么能再运行该代码。

相反，您可以立即添加处理程序，但如果该元素不可见，则不要执行任何操作或者，您只能在显示元素时添加处理程序，并在隐藏元素时将其删除。

Answer 2

根本不需要if;并且您没有正确使用它，如@SLaks的答案中所述。为什么不将函数分配给不可见元素？我想我们应该这样做，所以我认为这就是你想要的：http://jsfiddle.net/balintbako/yuAhb/1/

 $('button.nav-mobile-switch').click(function () {
     $(this).hide();
     $('ul.site-nav.actual-navigation').show();
     return false;
 });

 $(document).click(function () {
     $('ul.site-nav.actual-navigation').hide();
     $('button.nav-mobile-switch').show();
 });


 $('ul.site-nav.actual-navigation').click(function (e) {
     e.stopPropagation();
     return false;
 });

Answer 3

待办事项

$('ul.site-nav.actual-navigation').live('click', function(e) {
  if ($(e.target).css('display') == 'block') {
    //code
  }
});

Answer 4

您可以使用可见选择器但功能不适用于visibility属性。： -

$('element:visible')

所以你可以试试这个。删除if条件并使用： -

$(document).click(function () {
     $('ul.site-nav.actual-navigation').hide();
     $('button.nav-mobile-switch').show();
 });

它将隐藏菜单并显示按钮。

请参阅此fiddle

jQuery如果元素可见，我做错了什么？

4 个答案: