바깥 쪽을 클릭하면 div가 사라지게하는 방법은 무엇입니까?

는 여기에 내가 사업부의 외부를 클릭하면 워드 프레스의 검색 창을 사라지게하고 싶습니다 워드 프레스바깥 쪽을 클릭하면 div가 사라지게하는 방법은 무엇입니까?

<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입니다. 어떻게해야합니까?

출처

2016-10-14 Mehmet

jquery를 사용하면 다음과 같은 약간의 작업을 수행 할 수 있습니다. 상자의 빨간색 부분을 클릭하면 내부 div가 사라집니다.

는 바이올린 : https://jsfiddle.net/xzc36bvc/2/

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

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

출처

2016-10-14 20:03:26

는 jsfiddle에서 작업을 보이지만, 나는 그것이 내 컴퓨터에서 작업 할 수 없습니다. jsfiddle에 같은 코드를 복사했습니다. – Mehmet

자네가 끝내려면 코드를 약간 수정해야 해. 내부는 숨기려는 검색 상자가 될 것이고, 부모 div는'outer' 클래스가 될 것입니다. 나는'fixedmenu'와'fixedmenu_1'가 당신이 언급하는 div라고 가정합니다, 맞습니까? –

먼저, 동일한 코드를 사용하여 내 컴퓨터에서 작동하는 방식을 배우고 "index.html"페이지를 만들었습니다. 스크립트, CSS 및 HTML 코드를 정확하게 입력했습니다. 여하튼, 그것은 작동하지 않았다. 사용 가능한 경우 index.html 파일을 업로드 할 수 있습니까? 그것도 내 코드에서 작동하지 않았다. – Mehmet

바깥 쪽을 클릭하면 div가 사라지게하는 방법은 무엇입니까?

답변

관련 문제