外部にクリックするとdivを消す方法は？ここで

Question

はWordpressの

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

ためのCSS & HTMLである私は、div要素の外側をクリックしたときにWordpressの検索ボックスが消えるようにしたいと思います。これどうやってするの？

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); 
})