Question

当用户点击菜单中的任何地方时，我希望调整offcanvas菜单。我正在使用下面链接中的菜单，该菜单适用于＆＃39; .offcanvas-expanded＆＃39;通过css转换将菜单带入视口的类。目前，菜单只能通过点击＆＃39; .offcanvas-toggle＆＃39;来打开/关闭。按钮。

菜单：http://slicejack.com/responsive-offcanvas-navigation-menu/

当用户点击页面上的任意位置时，我希望能够切换此课程。我尝试使用以下脚本（失败），这导致整个页面成为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');
    }
  });
});

有人可以就如何实现这一目标提出一些建议吗？

更新 - 通过以下@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区域。

我在on click方法中添加了一个检查，它专门检查了你在offcanvas区域中的a-tags。如果其中任何一个与click的目标匹配，则在切换样式类之前返回该方法。

$(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 -->

点击外面关闭offcan博客菜单

1 个答案: