jqueryトグルクラスが他のdivにあるときには動作しません

Question

こんにちは私のページではトグルエフェクトを実行していますが、ページの他の部分でボタンを閉じるとエラーになります。ボタンがhtmlの一部に含まれている場合、例えば他のdivでボタンが機能しない場合は、何が起こっているのか把握できますか？私のjqueryがきれいだと言うこともできますか？または改善する必要がありますか？

HTML：

<a href="#menu-toggle" class="btn btn-sidebar-close" id="close"> 
    <i class="fa fa-times" aria-hidden="true"></i> 
</a> 

<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip> 
    <i class="fa fa-search fa-2x" aria-hidden="true"></i> 
</a> 

JS：

$('#close').click(function(e) { 
    e.preventDefault(); 
    $('#wrapper').toggleClass('toggled'); 
}); 

$('#menu-toggle').click(function(e) { 
    e.preventDefault(); 
    $('#wrapper').toggleClass('toggled'); 
}); 

Answer 1

改善は次のようになります。

$('#close').click(function(e) { 
     e.preventDefault(); 
     $('#wrapper').toggleClass('toggled'); 
}); 

$('#menu-toggle').click(function(e) { 
     e.preventDefault(); 
     $('#wrapper').toggleClass('toggled'); 
}); 

を単一の関数で、彼らは両方とも同じ機能を含むているよう：

$('#close, #menu-toggle').click(function(e) { 
     e.preventDefault(); 
     $('#wrapper').toggleClass('toggled'); 
}); 

Answer 2

あなたがここで "ツールチップ" の後に引用符を閉じるのを忘れ：

<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip"> 
    <i class="fa fa-search fa-2x" aria-hidden="true"></i> 
</a> 

そうでない場合は、あなたのコードは動作しています：

See this Fiddle