JQuery отзывчивое меню не будет работать

Question

Я начинающий веб-разработчик без реальных знаний jquery, поэтому, пожалуйста, несите меня. Я пытаюсь создать простое мобильное раскрывающееся меню (в идеале я бы хотел понизить слайды, но сначала шаги для ребенка). По большей части я понял это. Тем не менее, я назначил свой «Unordered List» селектором ID, и он больше не работает. Что я не замечаю? Заранее спасибо!

Это мой код: JSFiddle

$(document).ready(function(){ 
 
    $('#toggle-button').click(function(){ 
 
     
 
     $('#menu').toggleClass('show'); 
 
     
 
     
 
     
 
    }); 
 
    
 
});

.show { 
 
    display: block; 
 
} 
 

 
nav { 
 
    background: black; 
 
    width: 100%; 
 
} 
 

 
.menu-bar { 
 
    width: 100%; 
 
    background: black; 
 
    height: 50px; 
 
} 
 

 
#toggle-button { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 60px; 
 
    height: 35px; 
 
    width: 35px; 
 
    background: red; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 

 
#menu { 
 
    list-style: none; 
 
    width: 100%; 
 
    display: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#menu li { 
 
    height: 50px; 
 
    background: #535252; 
 
} 
 

 
#menu li a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    color: white; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
#menu li:hover { 
 
    background: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="menu-bar"></div> 
 

 
    <nav> 
 
     
 
     <ul id="menu"> 
 
      <li><a href="#">Profile</a></li> 
 
      
 
      <li><a href="#">Profile</a></li> 
 
      
 
      <li><a href="#">Profile</a></li> 
 
     </ul> 
 
    </nav> 
 

 
<a id="toggle-button" href="#"></a> 
 

Answer 1

Использование:

#menu.show { 
    display: block; 
} 

после! вы определили свои значения по умолчанию для #menu {
https://jsfiddle.net/nw2wf3uh/6/

---

или использовать не-так приятно !important:
https://jsfiddle.net/nw2wf3uh/7/

.show { 
    display: block !important; /* if .show is placed before #menu styles in CSS */ 
} 

---

Вы также можете пойти в другую сторону вокруг, установка на ваш #menu a .hide по умолчанию:

<ul id="menu" class="hide"> 

CSS:

.hide { 
    display: none; /* but remove display:none; from #menu now! */ 
} 

и переключение, что .hide класса:

$('#toggle-button').click(function(){ 
    $('#menu').toggleClass('hide'); 
    // or simply: $('#menu').toggle(); 
}); 

Здесь вы не будете работать в преобладающие стили причины приоритета и вы не будете использовать !importantисправить (но у вас могут быть проблемы с пользователями с отключенным JS, если это вас беспокоит (вам не все равно, но это всегда зависит.)).