クリック時にオフキャンバスメニューを閉じる

Question

ユーザーがメニューをクリックしたときにオフキャンバスメニューを閉じるようにしたいと思っています。下のリンクからメニューを使用しています。これは、 '.offcanvas-expanded'クラスを適用して、メニューをCSSトランジション経由でビューポートに持っていきます。そのままにしておくと、メニューは[.offcanvas-toggle]ボタンをクリックすることでのみ開く/閉じることができます。

メニュー：http://slicejack.com/responsive-offcanvas-navigation-menu/

私は、ユーザーがメニューoutwithページ上の任意の場所をクリックしたときに、このクラスを切り替えることができるようにしたいと思います。私は次のスクリプトでこの試みを試みましたが（成功しなかった）、ページ全体がCSS移行のトリガーになっていました。

https://jsfiddle.net/graemebryson/onz7xspq/

jQuery(function($){ 
    $('.offcanvas-toggle').on('click', function() { 
    $('body').toggleClass('offcanvas-expanded'); 
    }); 

    $(document).click (function (e) { 
    if ((e.target != $('.offcanvas')[0]) && ($('body').hasClass('offcanvas-expanded'))) { 
     $('body').toggleClass('offcanvas-expanded'); 
    } 
    }); 
}); 

誰もが、私はこれを達成することができます方法についてのいくつかのアドバイスを提供してもらえますか？

UPDATE - 以下@Joffuttを経由して全答：あなたはすでに提供されている例を使用して

https://jsfiddle.net/graemebryson/97zdfwvf/

$(document).ready(function() { 
    $('.offcanvas-toggle').on('click', function() { 
    $('body').toggleClass('offcanvas-expanded'); 
    }); 
}); 
$(document).click(function(e) { 
    if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) { 
    var li_tags = $($('.offcanvas')[0]).find('li'); 
    var a_tags = $($('.offcanvas')[0]).find('a'); 
    for (var i = 0; i < li_tags.length; i++) { 
     if (e.target == li_tags[i] || e.target == a_tags[i]) { 
     return; 
     } 
    } 
    $('body').toggleClass('offcanvas-expanded'); 
    } 
}); 

Answer 1

は、私がしたとき、具体的offcanvasエリアを隠していないために機能が追加されましたいずれかのリンクをクリックします。

オフキャンバス領域にあるaタグとの具体的なチェックを行うクリック方法のチェックボックスにチェックを入れました。クリックの対象と一致するものがあれば、スタイルクラスを切り替える前にメソッドから戻ってきます。

$(document).ready(function() { 
 
    $('.offcanvas-toggle').on('click', function() { 
 
    $('body').toggleClass('offcanvas-expanded'); 
 
    }); 
 
}); 
 
$(document).click(function(e) { 
 
    if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) { 
 
    var li_tags = $($('.offcanvas')[0]).find('li'); 
 
    var a_tags = $($('.offcanvas')[0]).find('a'); 
 
    for (var i = 0; i < li_tags.length; i++) { 
 
     if (e.target == li_tags[i] || e.target == a_tags[i]) { 
 
     return; 
 
     } 
 
    } 
 
    $('body').toggleClass('offcanvas-expanded'); 
 
    } 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 
/* 
 
* Page wrap 
 
*/ 
 

 
.page-wrap { 
 
    -webkit-transition: -webkit-transform 0.2s; 
 
    -webkit-transition: all 200ms ease-in-out; 
 
    transition: all 200ms ease-in-out; 
 
} 
 
.offcanvas-expanded .page-wrap { 
 
    -webkit-transform: translateX(320px); 
 
    -ms-transform: translateX(320px); 
 
    transform: translateX(320px); 
 
} 
 
/* 
 
* Offcanvas 
 
*/ 
 

 
.offcanvas { 
 
    width: 320px; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: #fff; 
 
    z-index: 5000; 
 
    -webkit-transform: translateX(-320px); 
 
    -ms-transform: translateX(-320px); 
 
    transform: translateX(-320px); 
 
    -webkit-transition: -webkit-transform 0.2s; 
 
    -webkit-transition: all 200ms ease-in-out; 
 
    transition: all 200ms ease-in-out; 
 
} 
 
.offcanvas-expanded .offcanvas { 
 
    -webkit-transform: translateX(0); 
 
    -ms-transform: translateX(0); 
 
    transform: translateX(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Adapted from http://slicejack.com/responsive-offcanvas-navigation-menu/ --> 
 

 
<div class="page-wrap"> 
 
    <button class="offcanvas-toggle">Open offcanvas here</button> 
 
    <h1>Simple HTML, LESS, jQuery responsive offcanvas navigation menu</h1> 
 
    <p>This is simple offcanvas navigation menu build on HTML, LESS and jQuery. You can use it as a starter offcanvas template for your next project. If you want to see compiled version of LESS just click on <i>"View Compiled"</i> button in CSS section. In CSS 
 
    there are comments that highlight what's important to include. There is a full tutorial on how to use this offcanvas navigation menu at slicejack.com/blog, just click on button bellow to read full article.</p> 
 
    <a href="#" class="btn">Read more on Slicejack.com</a> 
 
</div> 
 
<!-- /.page wrap --> 
 

 
<div class="offcanvas"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Blog</a> 
 
    </li> 
 
    <li><a href="#">About us</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    <li><a href="#">Twitter</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!-- /.offcanvas -->