CSS 드롭 다운 메뉴 숨기기

CSS가있는 드롭 다운 메뉴를 만들었습니다. 여기에 HTML 코드는 다음과 같습니다이 완벽하게 작동CSS 드롭 다운 메뉴 숨기기

.dropdown { 
    visibility:hidden; 
    /*...*/ 
} 

#menu li:hover .dropdown{ 
    visibility:visible; 
}

: 여기

<li class="menu" id="menu"> 
    <div class="dropdown">  
    <div class="col1"> ...

는 CSS입니다. jQuery에서이 메뉴의 링크에 대한 click 이벤트를 처리하고 사용자가 링크를 클릭 할 때마다 jQuery를 사용하여 드롭 다운을 숨기려고합니다. (: 나는 함께이 사용하지 않은 참고.) : 나는이 두 시도 내가 가져가 때마다 나는 메뉴를 다시 얻을하지 않습니다

$('.dropdown').css('visibility', 'hidden'); //didn't work 

$('.dropdown').hide(); //didn't work either

는 둘 다 메뉴를 숨길 그러나 그들은 그것을 숨길 때 문제가 항목 위에 마우스를 놓습니다.

출처

2011-11-18 Alireza Noori

체크 아웃 www.sc-pa.com, 자바 스크립트를 끄십시오, 당신이 원하는 무엇입니까? –

좋아요, 사실 실제로 일어나고있는 것은 요소에 $('.dropdown').css('visibility', 'hidden');을 설정하면 요소의 스타일 속성에 인라인을 추가하는 것입니다 (방화 벽을 통해이를 확인할 수 있음). CSS

#menu li:hover .dropdown{ 
    visibility:visible; 
}

인라인 스타일이 우선 적용되므로 아무런 효과가 없습니다. .dropdown 요소는 항상 hidden으로 설정됩니다.

출처

2011-11-18 17:32:22

두 방법을 동시에 사용하지 않았습니다. 나는 $ ('dropdown')을 시도했다. css ('visibility', 'hidden'); '도 도움이되지 않았다. 문제를 해결하면 안됩니까? –

이 문제를 해결하려면 어떻게해야합니까? –

마우스가 버튼을 가리키면 발생하는 상황과 그렇지 않을 때 발생하는 상황을 정의해야합니다. 이런 식으로 뭔가 :

jQuery(document).ready(function(){ 
    jQuery(".dropdown").hover(function() { 
     /* hovering actions */ 
    }, function() { 
     /* non-hovering functions */ 
    }); 
});

출처

2011-11-18 17:32:40 techouse

CSS를 사용하지 않았습니까? 나는 다시 그것을하는 것은 jQuery (어쩌면 나는 틀렸다)를 사용하여 요구되지 않을 것이라고 생각한다. –

나는 이런 식으로 나의 메뉴를한다. CSS에서 기본 non-hovered 상태를 설정 한 다음 나머지는 jQuery로 남겨 둡니다. 블록 된 JS가있는 사용자를 위해 CSS 호버 동작을

CSS 드롭 다운 메뉴 숨기기

답변