사용자가 임의의 HTML 요소를 클릭 할 때 특정 작업 수행

Question

클릭하면 체크 상자 입력을 사용하여 하위 메뉴를 드롭 다운하는 탐색 버튼을 만듭니다. 사용자가 레이블 입력을 클릭하고 메뉴 드롭 다운을 클릭 할 때마다 레이블을 다시 클릭하면 축소됩니다.

하지만 지금은 특정 동작을 수행해야합니다. HTML 요소를 클릭 할 때 드롭 다운 메뉴 축소를 시도하므로 사용자가 특정 요소를 클릭하여 메뉴를 접을 필요가 없습니다. 특히 드롭 다운 메뉴

HTML & CSS 코드 :

<ul class="down-bar" style="list-style:hidden"> 
    <div class="dropdown"> 
     <input type="checkbox" value="drop" id="drop-1" class="dropper"> 
     <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Click <b class="caret"> &#9660;</b></label></li> 
     <div class="dropdown-menu"> 
      <a href="#">Link</a> 
     </div> 
    </div> 

CSS :

.dropdown { 
    display: inline-block; 
    float: left; 
    padding-top: 0em; 
    transition: 0.1s ease-in; 
    margin-top: 1.5%; 
    white-space: nowrap; 
} 
.dropdown-menu { 
    float: left; 
    display: none; 
    top: 0%; 
    margin-top: 2.2%; 
    width: 8%; 
    min-width: 50px; 
    padding-left: 18px; 
    background-color: rgba(26, 26, 26, 2); 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 99; 
    list-style-type: none; 
    transition: 0.1s ease-in; 
    border-color: black; 
    border-radius: 3px; 
} 
.dropdown-menu a { 
    color: white; 
    font-size: 0.9em; 
    padding: 0px 2px 0px 0px; 
    text-decoration: none; 
    display: block; 
    list-style-type: none; 
    white-space: nowrap; 
    left: 0%; 
    margin-left: 0%; 
} 
.dropdown-menu a:hover { 
    color: #C90205; 
} 
.dropper { 
    display: none; 
    visibility: hidden; 
} 
.dropper:checked ~ .dropdown-menu { 
    display: block; 
    z-index: 99; 
} 
.dropper:checked ~ li #down-nav-1 { 
    border: solid 3px gray; 
    background-color: gray; 
    margin-top: 1.5%; 
    margin-left: 3%; 
    border-radius: 10px; 
} 

I는 전체 폭 앵커 태그를 사용하는 등 몇 가지 예,하지만 다음 주 메뉴를 시도

---

사라질 것입니다. :active 태그를 사용하여 메뉴 표시를 None으로 다시 변경하려고합니다. full code을 참조하십시오. (전체 폭 예제의 주석 태그 제거).

결론적으로 어떻게 다른 요소를 사라지게 할 수 있습니까? 코드에서 실수가 있습니까? 첫 번째 좋은 해결책은 무엇입니까? 그렇다면 어떻게? 사용자가 HTML 요소를 클릭하면 메뉴를 다시 축소 할 수 있습니까? Javascript를 사용하지 않고도이 작업을 수행 할 수 있습니까?

Answer 1

당신이 예를 사용할 수있는 자바 스크립트 솔루션을 확인하는 경우 : 솔루션에 대한

$(document).click(function(e) { 
 
    if (! ($('#down-nav-1').is(e.toElement) || $('#drop-1').is(e.toElement))) { 
 
    $('.dropper').prop('checked', false) 
 
    } 
 
});

.dropdown { 
 
    display: inline-block; 
 
    float: left; 
 
    padding-top: 0em; 
 
    transition: 0.1s ease-in; 
 
    margin-top: 1.5%; 
 
    white-space: nowrap; 
 
} 
 
.dropdown-menu { 
 
    float: left; 
 
    display: none; 
 
    top: 0%; 
 
    margin-top: 2.2%; 
 
    width: 8%; 
 
    min-width: 50px; 
 
    padding-left: 18px; 
 
    background-color: rgba(26, 26, 26, 2); 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 99; 
 
    list-style-type: none; 
 
    transition: 0.1s ease-in; 
 
    border-color: black; 
 
    border-radius: 3px; 
 
} 
 
.dropdown-menu a { 
 
    color: white; 
 
    font-size: 0.9em; 
 
    padding: 0px 2px 0px 0px; 
 
    text-decoration: none; 
 
    display: block; 
 
    list-style-type: none; 
 
    white-space: nowrap; 
 
    left: 0%; 
 
    margin-left: 0%; 
 
} 
 
.dropdown-menu a:hover { 
 
    color: #C90205; 
 
} 
 
.dropper { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
.dropper:checked ~ .dropdown-menu { 
 
    display: block; 
 
    z-index: 99; 
 
} 
 
.dropper:checked ~ li #down-nav-1 { 
 
    border: solid 3px gray; 
 
    background-color: gray; 
 
    margin-top: 1.5%; 
 
    margin-left: 3%; 
 
    border-radius: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="down-bar" style="list-style:hidden"> 
 
    <div class="dropdown"> 
 
     <input type="checkbox" value="drop" id="drop-1" class="dropper"> 
 
     <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Click <b class="caret"> &#9660;</b></label></li> 
 
     <div class="dropdown-menu"> 
 
      <a href="#">Link</a> 
 
     </div> 
 
    </div>