如何使div在点击外部时消失?

Here is the CSS & HTML for Wordpress

这是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>

I'd like to make Wordpress search box disappear when outside of the div is clicked. How can I do this?

我想让Wordpress搜索框在div之外消失。我该怎么做呢?

1 个解决方案

#1

Using jquery you could do a little something like this. Click the red part of the box and the inner div will disappear.

使用jquery，你可以做一些类似的事情。单击方框的红色部分，内部div将消失。

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

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

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

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

#1