点击外左边的div将是0px

Question

我使用此代码显示右侧的div。现在，当div之外的clicked时，我希望div左侧位置为动态0。

实时网址： - http://emoncmt2.byethost15.com/App/bayar.html

$('.top-tittle .menu-icon').click(function () {

  var targetValue;

  if ($('.main-menu').css('left') == "0px") {
    targetValue = '-78%';
  } else {
    targetValue = '0px';
  }

  $(".main-menu").animate({
    left: targetValue
  }, 400);


});

Answer 1

您可以尝试添加以下内容：

$('body').click(function(ev) {
    var $target = $(ev.target);
    var clicked_icon = ($target.hasClass('menu-icon') || $target.closest('.menu-icon').length > 0);
    var clicked_menu = ($target.hasClass('main-menu') || $target.closest('.main-menu').lenght > 0);

    if (!clicked_icon && !clicked_menu) {
        $(".main-menu").animate({
            left: '-78%'
         }, 400);
    }
});

这是说：when the user clicks on the page and does NOT click on .main-menu, move the menu to the left.

Answer 2

＆＃13;

＆＃13;

$('.top-title .menu-icon').click(function() {
  var targetValue;

  if ($('.main-menu').css('left') == "0px") {
    targetValue = '-78%';
  } else {
    targetValue = '0px';
  }

  $(".main-menu").animate({
    left: targetValue
  }, 400);
});

$(document).on('click', function(e){
  var $target = $(e.target);
  
  //if the element is the menu icon, or is a child of the menu, ignore the click
  if (!$target.is('.menu-icon') && $target.closest('.main-menu').length < 1) {
    //doesn't belong to the icon or the menu, close the menu
    $('.main-menu').stop().animate({
      left: '-78%'
    }, 400);
  }
});

＆＃13;

.top-title {
  background-color: red;
}

.menu-icon {
  display: inline-block;
  min-width: 36px;
  min-height: 36px;
  background-color: black;
}

.main-menu {
  position: absolute;
  top:36px;
  left: -78%;
  display: inline-block;
  min-width: 78%;
  min-height: 100px;
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-title">
  <div class="menu-icon"></div>
</div>

<div class="main-menu"><p>Weeee</p></div>

＆＃13;

＆＃13;

＆＃13;