jquery - 在超链接的模糊事件上隐藏 div

Question

这是html代码

<a class="button_example" onclick="funshow()" onblur="hide()">login</a>

这是jQuery代码

function funshow() {
        $(".logbox").toggle();

    }

 function hide() {            
        $(".logbox").toggle();
    }   

当我单击超链接时，它会显示 div，但是当我单击身体的另一部分时，它不会隐藏.. 所以我如何才能在模糊时隐藏 div，请帮忙。

Answer 1

尝试这个，

function funshow() {
    $(".logbox").show();
}

function hide() {            
    $(".logbox").hide();
} 

或者尝试简单地喜欢，

HTML

<a class="button_example" href="#">login</a>

脚本

$('.button_example').on({
     'click': function () {
         $(".logbox").show();
     },
     'blur': function () {
         $(".logbox").hide();
     }
});

演示

Answer 2

上述场景中的问题是 onfocus 和 onblur 事件对链接
1 不起作用。您可以使用 onmouseout 事件而不是 blur 来隐藏 .logbox，但如果鼠标不在链接
或
2 上，这将隐藏它。如果您没有重定向用户使用超链接到任何其他页面，然后使用按钮而不是链接并应用 css 以使其看起来像链接

<button onclick="funshow()" onblur="hide()">login</button>

Answer 3

你可以试试这段代码。

  $('.button_example').on({
     'click': function () {
     $(".logbox").show();
 }
});
$(document).mouseup(function (e)
{
    var container = $(".logbox");

    if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Answer 4

<a class="button_example">login</a>
<div class="logbox">gfsdfgfd</div>

$(document).ready(function(){
                 $('.button_example').click(function() {
                       $(".logbox").toggle();
                       });

               });