javascript - How to open a box on screen by clicking a link and hide it when clicked outside in JS - Stack Overflow

admin管理员组

文章数量:1402815

My goal is to have #box2 appear when I click on #box1 but when you click on something other than #box2, it will display none and only #box1 will show.

Here are my 2 boxes, they are just 2 styled divs:

 var condition;


 $(document).click(function() {

   if (condition === 'block') {
     $(":not(#box2)").click(function() {
       $("#box2").hide();
     });
   }

 })



 $('#box1').click(function(e) {
   $('#box2').css('display', 'block');
   condition = 'block';
 });

 $('#box2').click(function(e) {
   $('#box2').css('display', 'none');
   condition = 'none';
 });

<script src=".1.1/jquery.min.js"></script>
<div id="box1" style="width: 300px; height: 300px; background-color: red; margin-left: 100px; margin-bottom: 50px; position: absolute;">
</div>



<div id="box2" style="width: 300px; height: 300px; background-color: blue; margin-left: 150px; display: none; position: absolute;">
</div>

My goal is to have #box2 appear when I click on #box1 but when you click on something other than #box2, it will display none and only #box1 will show.

Here are my 2 boxes, they are just 2 styled divs:

 var condition;


 $(document).click(function() {

   if (condition === 'block') {
     $(":not(#box2)").click(function() {
       $("#box2").hide();
     });
   }

 })



 $('#box1').click(function(e) {
   $('#box2').css('display', 'block');
   condition = 'block';
 });

 $('#box2').click(function(e) {
   $('#box2').css('display', 'none');
   condition = 'none';
 });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" style="width: 300px; height: 300px; background-color: red; margin-left: 100px; margin-bottom: 50px; position: absolute;">
</div>



<div id="box2" style="width: 300px; height: 300px; background-color: blue; margin-left: 150px; display: none; position: absolute;">
</div>

This current code works correctly the first time but after that, it wont run again. I am just wondering if there is a reset function or where I am going wrong?

Really what I want to do is make this work on an ipad so when the user clicks/taps away from the box, it will close. If there are better ways to do this on the Ipad tablet, please let me know!!

Any ideas?

• javascript
• jquery
• ipad
• tablet

Share Improve this question Follow edited Jul 28, 2016 at 17:44 Learn12 asked Jul 28, 2016 at 16:49 Learn12Learn12 21611 gold badge33 silver badges1414 bronze badges 5

• Don't nest click events – A. Wolff Commented Jul 28, 2016 at 16:55
• Should I use $(document).ready instead? – Learn12 Commented Jul 28, 2016 at 16:56
• Isn't it enough?: $(document).on('click', function (e) { $('#box2').toggle(!!$(e.target).closest('#box1').length); }); jsfiddle/rdrg8uLj I'm not sure what is your expected behaviour on clicking box2 – A. Wolff Commented Jul 28, 2016 at 16:59
• I think the title of the question should change into something like: 'How to open a box on screen by clicking a link and hide it when clicked outside in JavaScript' – Arash Milani Commented Jul 28, 2016 at 17:41
• True, I kinda asked 2 different questions. All set. – Learn12 Commented Jul 28, 2016 at 17:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Don't overplicate things. This is all the javascript you need, get rid of everything else:

$(document).click(function () {
    $('#box2').hide();
});

$('#box1').click(function (e) {
    e.stopPropagation();
    $('#box2').show();
});

You could just filter event target at document level:

$(document).on('click', function(e) {
  $('#box2').toggle(!!$(e.target).closest('#box1').length);
});

-jsFiddle-

You can listen to all click events of the document and then use the event.target to detect which element is being clicked. if the clicked element is box1 and box2 is not being shown then display it to the user. in any other condition we can hide the box2 if it's not the element being clicked. here is the vanilla JavaScript code to achieve this:

<html>
<body>
  <div id='box1'>BOX ONE</div>
  <div id='box2' style="display: none;">BOX TWO</div>
  <script>
    document.addEventListener('click', function(event) {
      var secondBox = document.getElementById('box2')
      if(event.target.id === 'box1' && secondBox.style.display === 'none'){
        secondBox.style.display = 'block'
      } else if (event.target.id !== 'box2') {
        secondBox.style.display = 'none'
      }
    })
  </script>
</body>
</html>

And if you are into DRY (Do not repeat yourself), you can define a function for this task. Take look at this modified version of the script:

function addOpenHandler(handler, target){
  document.addEventListener('click', function(event) {
    if(event.target === handler && target.style.display === 'none'){
      target.style.display = 'block'
    } else if (event.target !== target) {
      target.style.display = 'none'
    }
  })
}

addOpenHandler( document.getElementById('box1'), document.getElementById('box2') )

$(document).click(function () {
        if (condition === 'block')
        {
            $(":not(#box2)").click(function () {
                $("#box2").hide();
            });
        }
    })

The line $("#box2").hide(); is firing after every click

本文标签：