Question

嗨，我使用这个简单的jquery：

  $(document).ready(function(e) { 
    $("#langs_current").click(function(){    
        $("#langz").toggle(350);  
     });
   });

目前新的div#langz正在显示/隐藏我需要它，但只有在我点击链接#langs_current时才会发生这种情况。

如果用户点击这些链接，我需要自动隐藏。什么是最好的方式？

Answer 1

您可以在页面正文中添加一个点击事件，用于检查标记以查看您当前是否正在显示或隐藏div#langz。

var hideLangz = false;

$(document).ready(function(e) {  
  $("#langs_current").click(function(){     
    $("#langz").toggle(350);   
    hideLangz = true;
  });

  $("body").click(function(){     
    if (hideLangz) {
      $("#langz").toggle(350);   
      hideLangz = false;
    }
  });
});

Answer 2

不确定这是否符合用例，但您可以聆听document并查看currentTarget：

$(document).ready(function(e) {
    $(document).click(function(e) {
        var tg = $("#langz");
        if (e.currentTarget.id == "langs_current") {
             tg.toggle(350);
        } else {
             tg.hide(350);
        }
    }
}

Answer 3

您可以将click事件处理程序绑定到document元素，以获取页面上的所有点击。然后在#langs_current元素的事件处理程序中，您可以停止传播click事件，使其无法到达document元素（以及它的事件处理程序）：

$(function() { 
    $("#langs_current").click(function(event){

        //stop the propagation of this event so it doesn't reach the `document` element which would hide the `#langz` element
        event.stopPropagation();
        $("#langz").toggle(350);
    });
    $(document).click(function () {
        //the user has clicked on something other than `#langs_current`, run the needed code now

        //hide the `#langz` element if the `document` element receives a `click` event 
        //(which it won't if the user clicks on the `#langs_current` element since it stops the propagation of the event
        $("#langz").hide();
    });
});

event.stopPropagation()的文档：http://api.jquery.com/event.stopPropagation/

以下是使用event.stopPropagation()注册元素点击次数的演示：http://jsfiddle.net/aX2VE/1/

Answer 4

我的例子：http://jsfiddle.net/zHNtp/

$(document).ready(function(e) { 
    $("#langs_current").click(function(){    
        $("#langz").toggle(350);
        return false;
     });

    $('body').click(function(){
        $('#langz').hide(350);
        return false;
    });
});

应该这样做。

Answer 5

使用jQuery .mouseout（）函数。

http://api.jquery.com/mouseout/

这应该可以完成工作。

使用切换后点击后jquery自动隐藏？

5 个答案: