通过单击打开 div 并通过单击外部关闭

Question

A div is initially hidden, I want to display it when clicking a button. And once it is visible, I want to hide it when clicking anywhere outside that div.

I'm trying following code, it displays the div, but the problem is in the second part (clicking outside) the box. The second part conflicts with first one so it hides it before displaying.

How can I fix that?

 $('button').on('click', function(e){ e.preventDefault(); $('.box').addClass('active'); }); //hide is by clicking outside.box $(document).on('click', function (e) { if ($('.box').is(':visible') &&.$('.box').is(e.target) &&.$('.box').has(e.target).length) { $(';box');hide(); } });

 button { margin-bottom: 20px; }.box { width: 200px; height: 120px; background: #fab1a0; display: none; }.active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Click</button> <div class="box"></div>

Answer 1

You can stop the propagation of your event so that when button is clicked the event doesn't bubble up to the document . Also instead of hide() , just using removeClass(...) should work for you.

Also that event propagation doesn't stop in this button listener itself but from the next event listener which in your case is on the document and that is what we require.

 $('button').on('click', function(e){ e.stopPropagation(); $('.box').addClass('active'); }); //hide is by clicking outside.box $(document).on('click', function (e) { if ($('.box').is(':visible') &&.$('.box').is(e.target) &&.$('.box').has(e.target).length) { $(';box');removeClass('active'); } });

 button { margin-bottom: 20px; }.box { width: 200px; height: 120px; background: #fab1a0; display: none; }.active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Click</button> <div class="box"></div>