单击时显示/隐藏div，在div外部单击后消失

Question

有人会对我这样做，以便在div外部单击后div消失了吗？因为现在只有在再次单击Click to Show / Hide div时，它才会消失

$(document).ready(function(){
    $('#show').click(function() {
      $('.menu').toggle(1,"linear", "slide");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
    <ol>
      <li>India</li>
      <li>US</li>
      <li>UK</li>
      <li>Australia</li>
    </ol>
 </div>

Answer 1

我希望这是您的要求。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
    <ol>
      <li>India</li>
      <li>US</li>
      <li>UK</li>
      <li>Australia</li>
    </ol>
 </div>


 $('#show').click(function() {

      $('.menu').toggle(1,"linear", "slide");

       //OR

      $('.menu').toggle();
    });

这将检查您单击的元素是否没有id = show

$(document).click(function(e) {

  if( e.target.id != 'show') {
    $(".menu").hide();
  }
});