從左側推/滑動菜單。需要點擊整個頁面來隱藏菜單？

Question

我發現這個JSFiddle，我不知道如何解決它，所以用戶可以通過點擊內容中的任何地方而不是點擊按鈕來退出菜單。我不會有多種選擇，我無法弄清楚它？

$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $nav_list = $('#nav_list'); 

    $nav_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 
    }); 
}); 

謝謝！

Answer 1

你可以在<html/>標籤趕上點擊和隱藏菜單：

$('html').click(function() { 
    $nav_list.removeClass('active'); 
    $('.pushmenu-push').removeClass('pushmenu-push-toright'); 
    $menuLeft.removeClass('pushmenu-open'); 
}); 

這需要停止事件冒泡了，所以你首先點擊功能已開始

$nav_list.click(function(e) { 
    e.stopPropagation(); 

整件事可能肯定會被優化，但它應該給你一個開始。

這裏是更新的Fiddle。

Answer 2

在腳本中，我已經修改了相同的腳本有內容區域切換功能，文本「滑出式導航」

<script type="text/javascript"> 
$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $nav_list = $('#nav_list'); 

    $nav_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 
    }); 
}); 

$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $content_list = $('#contentpane'); 
    $content_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 

    }); 
}); 
</script> 

的下方的區域是做HTML頁面的變化。我已經添加了一個div的內容，所以點擊它可以通過腳本檢查

<div class="container"> 

     <div class="main"> 
     <section class="buttonset"> 
      <div id="nav_list">Menu</div> 
     </section> 

    <section class="content"> 
    <div id="contentpane"> 
     <h1>Slideout Navigation</h1> 
     <p> 

     </p> 
     </div> 
    </section><!-- End Content --> 
     </div><!-- End Main --> 
</div><!-- End Container -->