如何在外部单击时关闭元素

Question

你好，我有一个侧栏，当有人点击它时，我不会关闭。

我是jquery的新手。

这是我现在拥有的。现在你点击一个名为.exit的div来关闭元素。

  $('.icon-hamburger').click(function() {
    $('.hamburger').show();
  });

  $('.exit').click(function() {
      $('.hamburger').hide();
    });

jquery master如何做到这一点？

Answer 1

要做到这一点的方法如下。

  $('.icon-hamburger').click(function() {
    $('.hamburger').show();
    $('.navigation-overlay').show();
  });

(function (global) {
  function closeModal () {
    $('.hamburger').hide();
    $('.navigation-overlay').hide();
  }

  $(document).on('click', '.exit', closeModal)
  $(document).on('click', '.navigation-overlay', closeModal)
})(window);

我添加了一个名为.navigation-overlay

的灰色叠加div

这个的CSS是

.navigation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    z-index: 9;
    opacity: .5;
    display: none;
}