요소를 숨길 때 클릭 요소를 숨기기

ul에서 'show'클래스를 토글하려고하므로 메뉴가 표시되거나 숨겨 지지만 내 JQuery가 좋지 않아 작동하지 않을 수 있습니다.요소를 숨길 때 클릭 요소를 숨기기

<nav> 
    <ul class="show"> 
    <li><a href="#sec01">about us</a></li> 
    <li><a href="#sec02">how it works</a></li> 
    <li><a href="#sec03">comments</a></li> 
    </ul> 
</nav> 
<div class="hamburger"></div> 
nav {position:relative; z-index:999; display:flex; height:70px; width:100%; background:none; @include centerer; font-weight:bold;font-family: 'Roboto', sans-serif; 
@include small{background:#DADADA;} 
@include xs {background:#DADADA;;}} 
nav ul {display:flex; list-style:none; flex-direction:row; 
    @include small{margin-top:160px;flex-direction:column;} 
    @include xs{flex-direction:column;}} 
nav li { padding:20px; text-transform: uppercase; 

    @include small{background:#fff; color:#000} 
    @include xs{background:#fff; color:#000;}} 
nav li:hover a {border-bottom:2px solid #ff0000;} 

nav a,nav a:visited { color:#fff;text-decoration: none;} 
nav a:hover,nav a:active {color:#fff; text-decoration: none; ; } 
.show{ 
visibility:hidden; 
} 
.hamburger{position:absolute; z-index:999;top:10px; right:10px; height:50px; width:70px; background:#000;

https://jsfiddle.net/hsaw3frL/

$(document).ready(function(){ 
$(".hamburger").click(function() { 
    $('ul').toggleClass("show"); 
}); 
});

출처

2017-01-12 tom harrison

클래스 선택자는'.c-hamburger'에서와 같이 점으로 시작됩니다. jquery 매우 좋은 문서가 있습니다 https://api.jquery.com/category/selectors/ –

당신이 바인딩하려고하는 클릭 기능에 관해서 혼란 스러워요. – Learning2Code

@ Learning2Code 그가'div'에 바인딩하는 것처럼 보입니다. –

시도하는 것을 성취하기위한 방법이 많이 있습니다.

클래스의 수정 선택은

HTML (모든 ul 요소를 숨기려하지 않음) 그것에게 ID를 부여하여 ul 요소를 업데이트/수정, 새로운 CSS 속성 .hide를 추가

<ul id='menubar' class="show">

스크립트

$(document).ready(function() { 
    $(".hamburger").click(function() { 
    $('#menubar').toggleClass("hide");//toggle this class 
    }); 
});

CSS

.hide{ 
display: none !important; 
}

출처

2017-01-12 23:47:06 Searching

이것을 반영하기 위해 편집해야합니다. 내 피들에서 작동하지 않습니다. https://jsfiddle.net/hsaw3frL/6/ –

jquery가로드되지 않았기 때문에 thats. JAVASCRIPT 설정을 시도하고 프레임 워크 및 jquery 확장을 변경하십시오. – Searching

@tomharrison https://jsfiddle.net/p3tq1hjz/ – Searching

이 탄 줘!

$(document).ready(function(){ 
    $(".hamburger").click(function() { 
     $("ul").toggleClass("show"); 
    }); 
})

출처

2017-01-12 23:38:26

도 뭔가를 놓치지 않으면 내 피들에서 작동하지 않는 것 같습니다 –

@tomharrison, 업데이트 된 버전을 사용해보십시오. 나는 'c-hamburger'요소를 찾지 못했을 까? –

죄송합니다 그냥이 햄버거가 나를 위해 –

요소를 숨길 때 클릭 요소를 숨기기

답변

관련 문제