Question

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

当用户点击侧边栏时，我也希望它关闭。我已经看到了关于同一件事的其他问题/答案，但我无法弄清楚如何将其应用到我正在使用的代码中。还要阅读有关事件监听器的内容，以便在侧边栏打开时单击其他位置。

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

非常感谢任何帮助。

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');
  });

});

工作小提琴：

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

单击其他位置时，侧栏菜单关闭

3 个答案: