Hiding the menu by clicking on the area

Question

There is a button and a drop-down menu, tell me please What should I do so after the click on a menu area it wont hide, and after the click out of the menu area it will hide? Now it opens by clicking, and closes by clicking on the button and on the menu area.

$(function(){

$('.click').click(function() {
    $('.click-menu').slideToggle(200);
  });

  });

.click {
 width: 100px;
 height: 100px;
 background-color: red;
 text-align: center;
 border-radius: 50%;
 position: relative;
 cursor: pointer;
}

.click span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.click-menu {
 display: none;
 position: absolute;
 top: 110px;
 left: 50px;

}

.click-menu div {
 width:300px;
 text-align: center;
 background-color: green;
 margin-top: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="click">
   <span>CLICK</span>
   <div class="click-menu">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
   </div>
  </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="main.js"></script> 
</body>
</html>

@sam it has a complex structure. Here is a block as an example. Is that a problem? — Даша Новикова, Dec 17 '19 at 18:16
I think this can be useful: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — A. Horst, Dec 17 '19 at 18:25
The problem that I see is, click event applies entire click div which includes clicking on child elements as well. — sam, Dec 17 '19 at 18:29

score 2 · Accepted Answer · answered Dec 17 '19 at 18:30

2

It's probably not the best way to do it but it works :

$(function(){

  $('.click').click(function() {
    $('.click-menu').slideToggle(200);
  });
  
  $('html').click( function(e) {
    if( $(e.target).closest('.click').length===0 && $(e.target).closest(".click-menu").length===0) {
      $('.click-menu').slideUp(200);
    }
  });

});

.click {
 width: 100px;
 height: 100px;
 background-color: red;
 text-align: center;
 border-radius: 50%;
 position: relative;
 cursor: pointer;
}

.click span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.click-menu {
 display: none;
 position: absolute;
 top: 110px;
 left: 50px;

}

.click-menu div {
 width:300px;
 text-align: center;
 background-color: green;
 margin-top: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="click">
 <span>CLICK</span>
    </div>
    <div class="click-menu">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
   
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="main.js"></script> 
</body>
</html>

answered Dec 17 '19 at 18:30

Raphael Deiana

750
4
20

Vladimir Prydatko, [17.12.19 22:06] The code works fine if the block with the button and menu are two separate elements. But my block with the menu is situated inside the block with the button. And if I click on the menu then it is hiding. How can I fix it? Just put them out separately? – Даша Новикова Dec 17 '19 at 20:03
1

In this case you just have to replace $('.click') with $('.click>span') – Raphael Deiana Dec 17 '19 at 20:16
In this case, it appears and immediately hides – Даша Новикова Dec 17 '19 at 20:28
It's weird. I just tried it and it works. But only clicking on the span (the "CLICK" string), not the entire red button. I don't know why you really want to let your menu inside the button. It's not a good idea. – Raphael Deiana Dec 17 '19 at 20:35
Namely on the button in any way? – Даша Новикова Dec 17 '19 at 20:46
Sorry, I don't understand your last question. I do my best, but my English isn't very good. – Raphael Deiana Dec 17 '19 at 21:03
Is it possible to make exactly a click on the button? – Даша Новикова Dec 17 '19 at 21:10
help me please))) – Даша Новикова Dec 20 '19 at 19:33

score 0 · Answer 2 · answered Dec 17 '19 at 18:37

You need to call the event on the span, not the parent. Style the span accordingly. Then detect on a click on the html whether there is a parent named "click". If not, close the menu.

$(function(){

$('.click span').click(function() {
    $('.click-menu').slideToggle(200);
  });

$("html").click(function(e){
   if ( $(e.target).parents(".click").length ) {
  e.stopPropagation();
 } else {
  $('.click-menu').slideToggle(200);
 }
});

  });

.click {
 width: 100px;
 height: 100px;
 background-color: red;
 text-align: center;
 border-radius: 50%;
 position: relative;
 cursor: pointer;
}

.click span {
 position: absolute;
    height: 100%;
    width: 100%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.click-menu {
 display: none;
 position: absolute;
 top: 110px;
 left: 50px;

}

.click-menu div {
 width:300px;
 text-align: center;
 background-color: green;
 margin-top: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="click">
   <span>CLICK</span>
   <div class="click-menu">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
   </div>
  </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="main.js"></script> 
</body>
</html>

Hiding the menu by clicking on the area

2 Answers2