Question

我有一个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>

Answer 1

点击跨度上的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();
   });
});

Answer 2

如果.hiddenContent是div，则无法使用模糊，仅适用于文本输入。 mouseout可能是另一种选择，$(this)是我认为您在这种情况下正在寻找的内容：

$('.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

2 个答案:

点击其他地方隐藏