Problem when executing a click funtion

Question

Problem when executing a click funtion

Navigation

#1 by (1 votes)

1

ok guys I have the following problem I have a button that clicked it shows a div with certain information and clicked it for the second time hidden that div, all good but what I need is that the div is hidden to me and click on any side of the page more or less like in this same page that you click on the notifications and the notifications are shown and that if you click on any side of the page you immediately hide what I mean?

I tried to do that with the following code but it generates certain errors here I leave it

$("#show").toggle(function(){

$("#show-info").fadeIn("fast")


},function(){

$("html").click(function(){ $("#show-info").fadeOut("fast")}) })

#container{
  background:yellow;
  width:300px;
  height:100px;
  position:relative;
  margin:0 auto;
  text-align:center;
  line-height:100px;
  bottom:0;
}

#show-info{
  
  display:none;
  width:100%;
  position:absolute;
  height:200px;
  background:grey;
  position:relative;
  margin:0 auto;
}

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
</head>
<body>

<div id="container">

<div id="show-info"></div>

  <button class="btn btn-primary" id="show">
  
     Notify
  
  </button>

</div>
</body>
</html>

As you will see, it does something similar but it generates some problems, if you notice when clicking the button shows the hidden div but if you click again you can not hide it but if you click on any side if you hide it and then hide it for show it you have to click the button twice some idea of how I can do what I want without mistakes thanks in advance !!

jquery

asked by andy gibbs 11.07.2018 в 20:08

source

1 answer

Sesgar div with css how I delete the keys and the equal {=} that the hasmap creates when I compile the code

score 1 · Accepted Answer

You can do it by clicking on separate handlers for the button and the html. In addition you need event.stopPropagation() that prevents the click event from being propagated to the parent containers of the button. I'll give you the example:

$("#show").click(function(e){
  e.stopPropagation();
  $("#show-info").fadeToggle("fast");

});

$("html").click(function(){ 
  $("#show-info").fadeOut("fast");
});

#container{
  background:yellow;
  width:300px;
  height:100px;
  position:relative;
  margin:0 auto;
  text-align:center;
  line-height:100px;
  bottom:0;
}

#show-info{
  
  display:none;
  width:100%;
  position:absolute;
  height:200px;
  background:grey;
  position:relative;
  margin:0 auto;
}

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
</head>
<body>

<div id="container">

<div id="show-info"></div>

  <button class="btn btn-primary" id="show">
  
     Notify
  
  </button>

</div>
</body>
</html>