隐藏在外部弹出onclick

Question

单击“文本”后，我们将显示“弹出框”。要求：当用户单击外部弹出窗口时，我试图在此处隐藏弹出窗口：https : //codepen.io/kidsdial/pen/VNxMYO ....问题：为此，我尝试下面的代码，但是在此之后，当我尝试通过dropdown更改字体系列时，弹出窗口将关闭...。$(document).mouseup(function(e)     {        var container = $('.white_content');        if (!container.is(e.target) && container.has(e.target).length === 0)         {            container.hide();                       $('.font-select').css('display', 'none');         }    }); .container {      background: silver;      position: relative;    }    .container img {      position: absolute;      top: 0;      bottom: 250px;      left: 0;      right: 0;      margin: auto;      z-index: 999;    }    .masked-img {      overflow: hidden;      position: relative;    }    .txtContainer {      position: absolute;      text-align: center;      color: #FFF    }    .txtContainer:hover {      background: red;      padding: 1px;      border-style: dotted;    }    .pip {      display: inline-block;      margin: 0;      position: absolute;    }    .remove {      background: #444;      border: 1px solid black;      color: white;      text-align: center;      cursor: pointer;      position: absolute;      z-index: 3;    }    .remove:hover {      background: white;      color: black;    }    .edit {      display: block;      background: #444;      border: 1px solid black;      color: white;      text-align: center;      cursor: pointer;      position: absolute;      z-index: 3;    }    .edit:hover {      background: white;      color: black;      position: absolute;      z-index: 3;    }    .white_content {      display: none;      position: absolute;      top: 25%;      left: 25%;      width: 50%;      height: 50%;      padding: 16px;      border: 16px solid orange;      background-color: white;      z-index: 1002;      overflow: auto;    }

Answer 1

无需执行任何操作，只需将您的下拉菜单添加到您的菜单中即可container var解决问题

var container = $('.white_content, .font-select');

现在，当您选择下拉菜单时，弹出窗口不会关闭