-6

我试图检测一个元素是否可见，然后为其分配一个功能：

菜单按钮与按钮一起显示后，我想单击任意位置并隐藏菜单并重新显示按钮。

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')and$('element').is(':visible')方法。

我在某处读到伪选择器:visible不适用于函数，但是当我单击任何位置时，此处的示例也不会隐藏元素。

我做错了什么？

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

4

4 回答 4

5

您仅在页面首次加载时检查可见性。
当菜单实际可见时，不会再运行该代码。

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

于 2013-06-25T13:20:28.373 回答
1

你根本不需要那个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;
 });
于 2013-06-25T13:21:33.377 回答
0

做

$('ul.site-nav.actual-navigation').live('click', function(e) {
  if ($(e.target).css('display') == 'block') {
    //code
  }
});
于 2013-06-25T13:23:21.917 回答
-1

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

$('element:visible')

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

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

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

看到这个小提琴

于 2013-06-25T13:17:04.960 回答