javascript - 单击外部时如何使div消失？

Question

这是 Wordpress 的 CSS 和 HTML

<style>
    .fixedmenu {
        background: url('https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/magnifier_glass-48.png');
        background-repeat: no-repeat;
        width: 43px;
        height: 43px;
        position: fixed;
        right: 0px;
        top: 160px;
        z-index: 1000;
    }

    .fixedmenu1 {
        background-color: #62bdb2;
        background-repeat: no-repeat;
        width: 250px;
        height: 100px;
        position: fixed;
        right: 0px;
        top: 160px;
        z-index: 1100;
        border-radius: 10px 0px 0px 10px;
    }

    .fixedmenu_1 {
        margin: 0px 0 0 43px;
    }
</style>
<div class='fixedmenu' onClick='this.className=&apos;fixedmenu1&apos;'>
    <div class='fixedmenu_1'>
        <?php get_search_form(); ?>
    </div>
</div>

我想让 Wordpress 搜索框在单击 div 外部时消失。我该怎么做？

Answer 1

使用 jquery 你可以做一些类似这样的事情。点击方框的红色部分，里面的div就会消失。

fiddle :https://jsfiddle.net/xzc36bvc/2/

<div class='fixedmenu'>
  <div class='fixedmenu_1'></div>
</div>

$('.fixedmenu').on('click', function() {
    $('.fixedmenu_1').fadeOut(500);
})