Click anywhere to close the window with jQuery

user_15807056 0
Viewed 114

everyone. I'm sorry that my English is not very good. Please forgive me if there is any mistake in the description.

My problem is that I made a design where clicking the yellow button would bring out the white menu, but clicking a line anywhere in the white menu would close the menu again

So far, something has been tried

However, it becomes impossible to even click the yellow button at the beginning. I am thinking that because the yellow button is also in the document, he decides to close the menu as well. How can I realize that if I click the yellow button, there will be a white menu, and if I click the white menu, I can close the menu?

Thank you for watching my question, and thank you for your help.

This is my code

$(function(){
   $('.btn').on('click',function(){
      $('.demo').toggle();
   });
});


//It was my attempt but it didn't work
// $(document).on('click',function(){
//     $(this).find('.demo').css('display','none');
//   })
.container{
  width: 100%;
  height: 100vh;
  background-color: #ef3473;
}
.nav{
  background-color: #2486b9;
}

.btn{
  display:block;
  width: 100px;
  height: 100%;
  background-color: #fbda41;
}

.menu{
  position: relative;
}

.demo{
  display:none;
  background-color: #fff;
  padding:20px;
  position: absolute;
  top:30px;
  left:60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <nav class="nav">
      <button href="javascript:;" class="btn">
           <a href="javascript:;" class="menu">選單</a>
           <ul class="demo">
              <li><a href="javascript:;">選單1</a></li>
              <li><a href="javascript:;">選單2</a></li>
           </ul>
           </a>
     </button>
</div>

jquery javascript
1 Answers

Hi you could check for the contain property, the click function provides you with the event parameter which includes the clicked target and then you check if the target is or not your element, something like this can do the trick:

$(function() {
  $('.btn').on('click', function() {
    $('.demo').toggle();
  });
  
  $(document).on('click', function(event) {
    if (event.target.contains($('.demo')[0])) {
        $('.demo').toggle();
    }
  })
});
.container {
  width: 100%;
  height: 100vh;
  background-color: #ef3473;
}

.nav {
  background-color: #2486b9;
}

.btn {
  display: block;
  width: 100px;
  height: 100%;
  background-color: #fbda41;
}

.menu {
  position: relative;
}

.demo {
  display: none;
  background-color: #fff;
  padding: 20px;
  position: absolute;
  top: 30px;
  left: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <button href="javascript:;" class="btn">
      <a href="javascript:;" class="menu">選單</a>
      <ul class="demo">
        <li><a href="javascript:;">選單1</a></li>
        <li><a href="javascript:;">選單2</a></li>
      </ul>
    </button>
  </nav>
</div>

Reference https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

user_60321550
Related