1

ここに私のコードペンがあります http://codepen.io/anon/pen/GZWPrj

何度か回答されていることは知っていますが、それを自分のコードに翻訳するのは難しすぎます。

そのため、意図したとおりに機能する 2 番目のオフキャンバス メニューがあります。

追加したいことの 1 つは、このメニューを閉じる機能です。キャンバス外のメニューの外側の任意の場所をクリックして、つまりキャンバス内をクリックします。

私は次のような良い実例を見つけました

$(window).on("click", function(e) {
    if (
      $(".wrapper").hasClass("nav-open") && 
      !$(e.target).parents(".side-nav").hasClass("side-nav") && 
      !$(e.target).hasClass("toggle")
    ) {
        $(".wrapper").removeClass("nav-open");
      }
  });

hereウィンドウのクリックでキャンバス外のメニューを閉じますが、私のバージョンのコードにそれを実装する方法を理解するにはあまりにも愚かです。

4

1 に答える 1

1

Your html structure is different to the linked example. Below is some code that will work for your example:

$(window).on("click", function(e) {
  if (!$(e.target).hasClass('menu-link') && !$(e.target).closest('.nav-stacked').hasClass('active')) {
    //Revert the menu
    $('#menu').removeClass('active');
    //Revert the main content
    $('.container').removeClass('active');
  }
});

Updated Codepen

于 2016-03-21T22:26:37.277 に答える