드롭 다운 메뉴에서 CSS 드롭 다운 메뉴를 만드는 방법

Question

다음 CSS 드롭 다운 메뉴를 클릭하면 드롭 다운 만 허용합니까? 예를 들어, 이제 마우스를 가리키면 "선택하십시오". 두 번째 레이어가 나타납니다. "Please Select"를 클릭하면 두 번째 레이어가 나타납니다. 또한 클릭 이벤트는 두 번째 계층 메뉴에 적용되어야합니다.

이

내가 jQuery를 사용하고 있지만,이 작업을 수행하는 방법을 모르는 Fiddle

입니다. 나는 당신의 CSS에서 발견

는 HTML 코드

<ul class="dropdown"> 
     <li><a href="#">Please select</a> 
      <ul class="sub_menu"> 
       <li> 
        <a href="#">Artificial Turf</a> 
        <ul> 
         <li><a href="#">Indoor</a></li> 
         <li><a href="#">Outdoor</a></li> 
        </ul>      
       </li> 
       <li> 
        <a href="#">Batting Cages</a> 
        <ul> 
         <li><a href="#">Indoor</a></li> 
         <li><a href="#">Outdoor</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul​ 

CSS 코드

/* 
    LEVEL ONE 
*/ 
ul.dropdown       { position: relative; } 
ul.dropdown li      { font-weight: bold; float: left; zoom: 1; background: #ccc; } 
ul.dropdown a:hover     { color: #000; } 
ul.dropdown a:active    { color: #ffa500; } 
ul.dropdown li a     { display: block; padding: 4px 8px; border-right: 1px solid #333; 
             color: #222; } 
ul.dropdown li:last-child a   { border-right: none; } /* Doesn't work in IE */ 
ul.dropdown li.hover, 
ul.dropdown li:hover    { background: #F3D673; color: black; position: relative; } 
ul.dropdown li.hover a    { color: black; } 


/* 
    LEVEL TWO 
*/ 
ul.dropdown ul       { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } 
ul.dropdown ul li      { font-weight: normal; background: #f6f6f6; color: #000; 
             border-bottom: 1px solid #ccc; float: none; } 

            /* IE 6 & 7 Needs Inline Block */ 
ul.dropdown ul li a     { border-right: none; width: 100%; display: inline-block; } 

/* 
    LEVEL THREE 
*/ 
ul.dropdown ul ul      { left: 100%; top: 0; } 
ul.dropdown li:hover > ul    { visibility: visible; }​ 

Answer 1

으로이 코드를 사용해야합니다, 그래서 당신은 표시하거나 UL-S를 숨길 가시성을 사용

$(".dropdown li").click(function() { 
     $(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" }); 
     $(this).children("ul").css({ "visibility":"visible" }); 
    })​ 

또한이 줄을 CSS에서 삭제해야합니다.

ul.dropdown li:hover > ul { visibility: visible; }​

탭이 코드를 사용 닫습니다

$('html').click(function() { 
    $(".dropdown ul").css({ "visibility":"hidden" }); 
}); 

$('.dropdown ').click(function(event){ 
    event.stopPropagation(); 
}); 

이 당신의 CSS에서 변경이 줄을 가져가의 경우 위치 변화를 해결하기 위해이 유래 질문도 How to detect a click outside an element?

에서 가져온

마지막 부분

ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; position: relative; }