클릭 한 후 메뉴 숨기기

Question

방금 ​​CSS와 HTML로 학습을 시작했으며 첫 번째 문제가 있습니다. 나는 그것을 클릭 한 후에 나의 메뉴를 보여 주려고 노력한다. 그것을 클릭하면 메뉴 항목이 나타나 즉시 숨 깁니다. 내 메뉴를 다음에 클릭 한 후에 어떻게 표시하고 숨길 수 있습니까? 데모가 있습니다. jsfiddle.net/jekfej46/1/ 감사합니다.

Answer 1

:active은 상태이기 때문에 이러한 현상이 발생합니다. 요소를 클릭하면 상태가 :active으로 변경되지만 만 계속 변경하면 해당 요소는으로 유지됩니다. 가장 좋은 방법은 jQuery를 사용하여 해당 버튼을 클릭 할 때 메뉴에 클래스를 추가하는 것입니다.

jQuery 사용법을 모르는 경우 인터넷을 통해 쉽게 안내 할 수있는 자습서가 많이 있습니다. 일단 원리를 얻으면 꽤 쉽습니다.

가 여기에 작동하는 바이올린의 : http://jsfiddle.net/jekfej46/1/

이 경우, 요소는 이미 active 클래스를 자바 스크립트 검사가있는 경우. 포함되어 있으면 클래스가 제거되어 메뉴가 닫힙니다. 그러나 원한다면 당신은 그 행동을 바꿀 수 있습니다.

Answer 2

CSS에서만 클릭 이벤트를 수행 할 수 없습니다. 여기에 자바 스크립트가 필요합니다. 이 같은 것은 jQuery를 사용하여 당신을 위해 이것을 할 것입니다.

$('#category').on('click', function(){ 
    $('.dropdown-content').show(); 
}); 

Answer 3

오, 많은 사람들. 이제는 페이지를 개선하기 위해 js와 jQ도 필요하다는 것을 알고 있습니다. 감사.