隐藏元素点击隐藏元素

我想切换类显示在ul，以便它显示/隐藏菜单，但我的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汉堡包'之前加一个点。 jquery有非常好的文档https://api.jquery.com/category/selectors/ –

我很困惑，你试图绑定到什么点击功能。 – Learning2Code

@ Learning2Code它看起来像他绑定到'div'。 –

有很多方法可以实现你正在尝试的。

类的固定选择，添加新的CSS属性.hide，修复/给它一个id更新ul元素（你不想隐藏所有ul元素）

HTML

<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没有加载。尝试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'元素？ –

对不起，应该只是汉堡已经编辑它现在反映这 –

隐藏元素点击隐藏元素

回答

相关问题