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

时间:2016-10-14 19:47:05

标签: javascript jquery html css3

这是CSS& Wordpress的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>

当点击div外部时,我想让Wordpress搜索框消失。我怎么能这样做?

1 个答案:

答案 0 :(得分: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);
})