Как вы связываете одну из кнопок панели навигации с боковой панелью, которая становится видимой?

Question

У меня есть три кнопки на верхней части моей веб-страницы. Кнопка «Контакт» позволяет открыть боковую панель с левой стороны, которая невидима до тех пор, пока не будет нажата кнопка «Контакт». Тем не менее, я не могу сделать свою боковую панель при нажатии «Связаться со мной».

Примером может служить следующее: http://www.andrewmart.in/ Когда вы нажимаете «Контакт», появляется боковая панель.

Вот три кнопки для домашней страницы:

<div class="nav"> 
     <ul class="nav nav-pills"> 
     <li><a class="navbar" href="index.html">Home</a></li> 
     <li><a class="navbar" href="#tagline">About Me</a></li> 
     <li><a class="navbar" id="contacts" href="#sidebar">Contact Me</a></li> 
     </ul> 
    </div> 

Вот боковая панель, которая остается невидимым, пока Contact Me не щелкают:

<div id="sidebar"> 
    <ul class="sides"> 
    <li class="side"><a class="things"href="header"> Home</a></li> 
    <li class="side"><a class="things"href="#tagline"> About Me</a></li> 
    <li class="side"><a class="things" href="#footer"> Contact Me</a></li> 
    </ul> 
    <footer>....</footer> 
</div> 

Вот JQuery для переключаясь на боковой панели невидимым до видимых:

<script> 
$(document).ready(function(){ 
    $('#contacts').click(function(){ 
    $('#sidebar').toggleClass('visble'); 
    }); 
}); 
</script> 

И наконец, CSS для боковой панели Меню:

#sidebar{ 
    background: #151718; 
    width: 200px; 
    height: 100%; 
    display: block; 
    position: absolute; 
    left: -200px; 
    top: 0px; 
    transition: left 0.3s linear; 
} 
#sidebar.visible{ 
    left: 0px; 
    transition: left 0.3s linear; 
} 

Answer 1

Ваше правописание класса .visible неверно. Работа скрипка: https://jsfiddle.net/a10d9hpf/

На другой ноте, я хотел бы также использовать preventDefault() на вашу функции мыши следующим образом:

$(document).ready(function(){ 
    $('#contacts').click(function(e){ 
    e.preventDefault(); 
    $('#sidebar').toggleClass('visible'); 
    }); 
}); 

Поскольку вы не передаете значение href в сценарий, чтобы определить, какой элемент id является при выполнении.

Answer 2

В вашем JQuery $('#sidebar').toggleClass('visble'); ваш видимый неправильный код.