想要在幻灯片菜单外的任何位置单击滑动

Question

http://jsfiddle.net/jqp6d3jz/1/

当用户点击菜单区域外，我想在菜单中滑动。

$('#nav-expander').on('click', function (e) {
    e.preventDefault();
    $('body').toggleClass('nav-expanded');
});
$('#nav-close').on('click', function (e) {
    e.preventDefault();
    $('body').removeClass('nav-expanded');
});

a.nav-expander {
  display: block;
  margin-right: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  z-index: 12;
  transition: right 0.3s ease-in-out 0s;
  margin-top: 380px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid #0099d8;
  border-bottom: 20px solid transparent;
}

a.nav-expander:hover {
  cursor: pointer;
}

a.nav-expander.fixed {
  position: fixed;
}

.nav-expanded a.nav-expander.fixed {
    right: 20em;
}

nav {
  display: block;
  height: 100%;
  overflow: auto;
  position: fixed;
  right: -20em;
  top: 0px;
  width: 20em;
  z-index: 2000;
  transition: right 0.3s ease-in-out 0s;
}
.nav-expanded nav {
  right: 0;
}

body.nav-expanded {
  margin-left: 0em;
  transition: right 0.4s ease-in-out 0s;
}

I would like to slide in the menu when the user clicks outside the menu area

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
        <nav class="mycres-graph-nav-menu" id="mycres-graph-nav">
            <ul class="list-unstyled mycres-graph-main-menu">

关闭
                             

    <div class="navbar-header pull-right">
        <a id="nav-expander" class="nav-expander fixed">
            &nbsp;<i class="fa fa-bars fa-lg white"></i>
        </a>
    </div>

Answer 1

试试这个：

$('#mycres-graph-nav').on('click', function(e) {
    e.stopPropagation();
});
// to make sure the nav does not slide in if any child of its as been clicked
$('#mycres-graph-nav').on('click', '*', function(e) {
    e.stopPropagation();
});
$('#nav-expander').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('body').toggleClass('nav-expanded');
});
$('#nav-close').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('body').removeClass('nav-expanded');
});
$('html').on('click', function(e){
    $('body').removeClass('nav-expanded');
});

demo