Question

我目前的守则：我有这个HTML

 <li>
   <span>Logged in as</span>&nbsp;
   <a class="user" href="#"><?php echo $this->loggedas ?></a>&nbsp;
   <a id="loginarrow" href="javascript: void(0);"></a>
 </li>

这是我的JS以上loginarrow id

 $("#loginarrow").click(function() {
   $("#logindrop").toggle("slow");
   return false;
 });

它工作得很好，但我可以通过再次点击它来关闭它。我不想这样我想要如果它打开我点击背景所以它必须关闭。因为我这样做了

 $("#loginarrow,body").click(function() {
   $("#logindrop").toggle("slow");
   return false;
 });

现在它工作很酷，但又有另一个问题。

1 =我在页面（主体）中有许多其他html元素，其中还有其他要调用的事件。因此，在这种情况下，每当我点击页面中的其他元素时，它就会切换我的div loginarrow。

我想要相同的功能但不在我的其他元素上只在背景上。任何提示

Answer 1

只有在可见时才关闭它。

$("body").click(function() { 
   if ($("#logindrop").is(":visible"))
      $("#logindrop").hide("slow");       
});

Answer 2

良好的浏览器性能的基本设计原则是仅在您对它们感兴趣时捕获事件。

所以把你的.click()处理程序放在#loginarrow元素上，但是在那个处理程序中注册一个一次性事件处理程序body将关闭它再次。像（未经测试）的东西：

$('#loginarrow').click(function() {
    $('#logindrop').show('slow');
    $('body').one('click', function() {
        $('#logindrop').hide('slow');
    });
    return false;
});

这将确保您不会在body上不必要地拦截每次点击，除非您确实需要。

请参阅http://jsfiddle.net/alnitak/vPHaj/

如何在页面中捕获“body”和“body”内部事件[Jquery]

2 个答案: