主页 / 问题 / 910012
Accepted
YourDeveloper
Asked:2020-11-22 15:55:23 +0000 UTC2020-11-22 15:55:23 +0000 UTC

如何关闭菜单？

  • 772

我不明白我做错了什么，我需要这样当菜单打开时，我可以通过单击“菜单”并单击菜单本身周围的区域来关闭它，已经花了一个小时）） 帮助）

$('.open').click(function() {
  if($('.open').hasClass('is-active')) {
    $('.open').removeClass('is-active');
    $('.my-block').removeClass('active');
    console.log('remove Class');
  } else {
    $('.open').addClass('is-active');
    $('.my-block').addClass('active');
  }
});

$(document).mouseup(function (e){
    let div = $('.my-block');

    if (!div.is(e.target) && div.has(e.target).length === 0) { 
      div.removeClass('active');
      $('.open').removeClass('is-active');
    } else {}
  });
.main {
  background: lightblue;
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}


.open {
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 5;
}
.open.is-active {
  color: red;
}
.my-block.active {
  right: 0;
}
.my-block {
  width: 130px;
  box-sizing: border-box;
  padding-right: 30px;
  height: auto;
  right: -150px;
  position: absolute;
  padding-top: 50px;
  background: yellow;
  z-index: 4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="open">меню</div>

  <div class="my-block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad impedit, laborum id rerum eveniet porro necessitatibus ullam culpa nostrum ipsam!
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    mouseup事件处理程序在单击之前触发，从而阻止单击处理程序正常工作

    $('.open').click(function(event) {
  event.stopPropagation();
  $('.open').toggleClass('is-active');
  $('.my-block').toggleClass('active');
});

$('.my-block').click(function(event){
  event.stopPropagation();
})

$('.main').click(function() {
  $('.open').removeClass('is-active');
  $('.my-block').removeClass('active');
})
    .main {
  background: lightblue;
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.open {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

.open.is-active {
  color: red;
}

.my-block.active {
  right: 0;
}

.my-block {
  width: 130px;
  box-sizing: border-box;
  padding-right: 30px;
  height: auto;
  right: -150px;
  position: absolute;
  padding-top: 50px;
  background: yellow;
  z-index: 4;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="open">меню</div>

  <div class="my-block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad impedit, laborum id rerum eveniet porro necessitatibus ullam culpa nostrum ipsam!
  </div>
</div>

    • 1

相关问题