3

ボタンをクリックすると左から右にスライドするサイド ナビゲーション メニューを作成しました。

$(document).ready(function(){
  $("#nav-toggle").click(function(){
    $("#page").toggleClass("margin");
  });
});

「#nav-toggle」ボタンをクリックすると、「#page」マージンが 0px から 600px に増加します。

    .margin {
margin-left:600px;width:380px;overflow-x:hidden
}


<div id="side-menu">

<nav>
    <a class="nav-links" href="#home">home</a>
    <a class="nav-links" href="#about">about</a>
    <a class="nav-links" href="#contact">contact</a>
</nav><!-- end of nav  -->

メニューの外をクリックしてメニューを閉じる方法を教えてください。

4

2 に答える 2

13 
$('body').on('click',function(event){
   if(!$(event.target).is('#nav-toggle')){
     $("#page").removeClass("margin");
   }
});
于 2013-05-22T12:03:40.120 に答える
0

簡単...ここで説明されているデリゲートを使用してください：http: //api.jquery.com/on/ 「直接および委任されたイベントを確認してください」

基本的に私が言うことは... ユーザーがドキュメントのどこかをクリックし、ソースが #side-menu 内にない場合:not(#side-menu) #nav-toggle からクラスマージンを削除します

$(document).on({
   click: function(){
      $("#nav-toggle").removeClass("margin")
   }
},":not(#side-menu)");
于 2013-05-22T12:21:51.540 に答える