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

Posted 2023-03-10

【中文标题】单击时显示/隐藏 div 并在单击 div 外部后消失

【英文标题】：Show/Hide div on click and disappears after clicking outside the div

【发布时间】：2018-11-10 08:37:48

【问题描述】：

会不会有人对我做这样在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>

【问题讨论】：

after clicking outside the div - 你在说哪个div（#show 或.menu）？

.menu（点击#menu后出现的那个）

【参考方案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();
  
);