单击其他地方时侧边栏菜单关闭

Question

我有一个侧边栏导航菜单，当单击“菜单”按钮时它会切换。

我还希望它在用户点击离开侧边栏时关闭。我已经看到了关于同一件事的其他问题/答案，但我不知道如何将它应用到我正在使用的代码中。另请阅读有关事件侦听器的内容，以便仅在侧边栏打开时才能在其他地方单击。

$(function () {
  $('.nav-toggle').on('click', function () {
    $('.sideNav').toggleClass('open');
  });
});

.sideNav {
  position: fixed;
  top: 3em;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}

.sideNav.open {
  transform: translateX(0);
  -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>


<div>
  <button class="nav-toggle">Menu</button>
  <nav class="sideNav">
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </nav>
</div>

非常感谢任何帮助。

Answer 1

你可以玩 target。一个例子是这样的：

$(function () {
  
  $('body').on('click', function(event) {
    if(event.target.className == 'nav-toggle') {
      $('.sideNav').addClass('open');
    } else {
      $('.sideNav').removeClass('open');
    }
  });
});

.sideNav {
  position: fixed;
  top: 3em;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}

.sideNav.open {
  transform: translateX(0);
  -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>


<div>
  <button class="nav-toggle">Menu</button>
  <nav class="sideNav">
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </nav>
</div>

Answer 2

你必须让事件检查目标是这个元素（边栏）还是他的孩子，如果不是隐藏它。这是我确实用过的东西。希望对您有所帮助。

$(document).on("click", function (e) {                          
            var elem, evt = e ? e : event;
            if (evt.srcElement) {
                elem = evt.srcElement;
            }
            else if (evt.target) {
                elem = evt.target;
            }
            if (elem.className !== "sideNav" ) {
                $(".sideNav").css("display", "none");                  
            }
        });

    };

Answer 3

试试这个：

$(function () {
  $('.nav-toggle').on('click', function (e) {
    $('.sideNav').toggleClass('open');

    e.stopPropagation();
    return false;
  });

  $('*:not(.nav-toggle)').on('click', function () {
    $('.sideNav').removeClass('open');
  });

});

工作fiddle：

https://jsfiddle.net/q907731k/8/

单击其他地方时侧边栏菜单关闭

Sidebar menu close when click elsewhere

jquery

sidebar