使用jquery在包装器中隐藏元素

当单击的目标位于“multiselectWrapper”div元素之外时，我需要关闭“multiselectPopUp”无序列表元素

 <div class="multiselectWrapper">
    <input type="text" class="multiselectTextBox"/>
    <ul class="multiselectPopUp">
      <li>One</li>
      <li>Two</li>
    </ul>
 </div>

 <script type="text/javascript">

    $(function () {

        $('.multiselectPopUp').hide();
        $(document).click(function (e) {
            debugger;
            if ($(e.target).is('.multiselectTextBox')) {
                $('.multiselectPopUp').show();
            }
            else if(// Plese provide me selector logic here){                   
                $('.multiselectPopUp').hide();
            }
        });
    });

 });

一个
两个

$（函数（）{
$（'.multiselectPopUp'）.hide（）；
$（文档）。单击（函数（e）{
调试器；
if（$（e.target）.is（'.multiselectTextBox'））{
$（'.multiselectPopUp'）.show（）；
}
else如果（//请在此提供选择器逻辑）{
$（'.multiselectPopUp'）.hide（）；
}
});
});
});

Jquery

$('ul.class').hide();

或

在此上下文中，您可以使用

.closest（）

来标识目标是否是

.multiselectWrapper

的后代

试试看

试试这个：

$(document).ready(function () {
        $('.multiselectPopUp').hide();
        $(document).click(function (e) {
            if ($(e.target).is('.multiselectTextBox')) {
                $('.multiselectPopUp').show();
            }
            else if($(e.target).closest('.multiselectWrapper').length === 0){                   
                $('.multiselectPopUp').hide();
            }
        });
    });  

一个
两个

$（函数（）{
$（'.multiselectPopUp'）.hide（）；
$（文档）。单击（函数（e）{
调试器；
if（$（e.target）.is（'.multiselectTextBox'））{
$（'.multiselectPopUp'）.show（）；
}
如果（$（e.target）.is（'.multiselectPopUp'）|$（e.target）.is（'.multiselectPopUp>li'）{
$（'.multiselectPopUp'）.show（）；
}
否则{
$（'.multiselectPopUp'）.hide（）；
}
});
});

当我在“div.multiselectWrapper”中的任意位置单击时，列表不应关闭。

if ($(e.target).is('.multiselectTextBox')) {
     $('.multiselectPopUp').show();
}
else if($(e.target).closest('.multiselectWrapper').length === 0){                   
     $('.multiselectPopUp').hide();
}

$(document).ready(function () {
        $('.multiselectPopUp').hide();
        $(document).click(function (e) {
            if ($(e.target).is('.multiselectTextBox')) {
                $('.multiselectPopUp').show();
            }
            else if($(e.target).closest('.multiselectWrapper').length === 0){                   
                $('.multiselectPopUp').hide();
            }
        });
    });  

 <div class="multiselectWrapper">
         <input type="text" class="multiselectTextBox"/>
         <ul class="multiselectPopUp">
           <li>One</li>
           <li>Two</li>
        </ul>
   </div>

   <script type="text/javascript">

  $(function () {

    $('.multiselectPopUp').hide();
    $(document).click(function (e) {
        debugger;
        if ($(e.target).is('.multiselectTextBox')) {
            $('.multiselectPopUp').show();
        }
        else if ($(e.target).is('.multiselectPopUp') || $(e.target).is('.multiselectPopUp > li')) { 
            $('.multiselectPopUp').show();
       }
       else {
           $('.multiselectPopUp').hide();
       }
    });
 });