單擊外部時如何使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 將消失。

小提琴： https : //jsfiddle.net/xzc36bvc/2/

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

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