Javascript 模糊上隐藏div

我有一个jQuery函数，当单击一个元素时，会显示一个隐藏的div

$('.openHide').click(function(){
    $(this).next('.hiddenContent').toggle();
});

我需要修改它，因为我可以关闭这个div，如果我点击后退，而不仅仅是第一个元素。可能在模糊上，但我不确定如何指示元素

$('.hiddenContent').blur(function() {
    $('.hiddenContent').parent().children('.hiddenContent').hide();
});

这是我的HTML：

<span class="openHide">text here</span>
<div style="display:none" class="hiddenContent">
     hidden content here
</div>

这里的文本
此处隐藏内容

如果

.hiddenContent

是一个div，您将无法使用blur，它只对文本输入有效

mouseout

可能是另一种选择，在这种情况下，

$（此）

是我认为您需要的：

$('.hiddenContent').mouseout(function() {
    $(this).hide();
});

单击其他位置时隐藏 如果要在元素外部单击时隐藏div，则必须注意页面正文上的所有单击：

$('body').click(function() {
    // Hide all hidden content
    $('.hiddenContent').hide();
});

然后，当您单击实际隐藏的内容本身时，以及当您想要打开它时，请提供和例外：

$('.hiddenContent').click(function(e) { e.stopPropagation() });

$('.openHide').click(function(e) {
    $(this).next('.hiddenContent').toggle();
    // this stops the event from then being caught by the body click binding
    e.stopPropagation();
});

单击跨度时，应切换div

在主体上单击应隐藏的div

单击div时，事件不应传播到主体

单击范围时，事件不应传播到主体

$(document).ready(function() {    
   $('.openHide').click(function(e) {
        $('.hiddenContent').toggle();
        e.stopPropagation();
   });

   $(document.body).click(function() {
        $('.hiddenContent').hide();
   });

   $('.hiddenContent').click(function(e) {
        e.stopPropagation();
   });
});

---

请提供您在此处使用的html内容，以便我们可以了解您尝试访问的元素。我们无法在非表单元素上使用.blur（）。您应该在元素上添加属性tabindex=0。您可以使用MouseOver和MouseOut；-）。它提供了一个更好的效果（特别是结合了FadeIn和FadeOut）。谢谢。我在上面发表了评论。我需要在单击div以外的任何位置时关闭该div。有可能吗？Pfff。。。我在上传HTML/Javascript代码时遇到一些问题。。。但是javascript代码应该足以用于您的示例。@Kees-是的，我注意到了。它似乎根本不想格式化。很奇怪。Stackoverflow bug？@Kees效果很好，谢谢！我只是想到了一个例外，我可能在网站上有多个这对的实例。我需要确保一次只打开一个。我的下一个头痛！再次感谢，谢谢，这很有效。它关闭了隐藏的内容，但前提是我在出发前在该区域上空盘旋。有没有办法在内容区域之外单击以关闭它？@santa我在include a solution中修改了我的答案。谢谢。我试过了，但它甚至不能让我的部门继续营业。它立即打开和关闭…：（@santa您需要在原始的click binding中执行

stopPropagation（）

之类的操作，我已经修改了答案中的最后一段代码来更正这个问题。不知道为什么，但当我单击div时，它仍然会关闭我的div。这可能是因为我的div类具有position:absolute；zIndex:5？