Question

当点击的目标位于“multiselect Wrapper”div元素之外时，我需要关闭'multiselect PopUp'无序列表元素。

 <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();
            }
        });
    });

 });

Answer 1

试试这个：

$(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();
            }
        });
    });

<强> JSFIDDLE DEMO

Answer 2

您可以在此上下文中使用.closest()来确定目标是否是.multiselectWrapper的后代。

尝试，

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

Answer 3

Jquery的

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

或

$('ul.class').css('display','none');

Answer 4

 <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();
       }
    });
 });

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

4 个答案: