ナビゲーションバーのボタンの1つを表示されるサイドバーにどのようにリンクしますか？

Question

私は私のウェブページの上に3つのボタンを持っています。 [私に連絡する]ボタンは、連絡先がクリックされるまで表示されない左側のサイドバーを開くことを想定しています。ただし、私に連絡するとサイドバーが表示されません。

例は次のとおりです。http://www.andrewmart.in/ [連絡先]をクリックすると、サイドバーが表示されます。ここで

は、ホーム・ページのための3つのボタンである。ここでは

<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のは目に見えないサイドバーを切り替えるためのものです：連絡下さいがクリックされるまで、ここで

<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> 

は見えないままサイドバーです表示：

<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'); 
    }); 
}); 

あなたはidがある要素を決定するためにスクリプトにhrefの値を渡していないので、実行時にターゲットとする。

Answer 2

あなたのJQuery $('#sidebar').toggleClass('visble');にあなたの目に見える綴りが間違っています。