使用jquery隱藏包裝器內的元素

Question

當點擊的目標位於「multiselectWrapper」div元素之外時，我需要關閉'multiselectPopUp'unorderlist元素。

<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

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

Answer 2

jQuery的

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

或

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

Answer 3

您可以使用.closest()在這種情況下，以確定目標是否是.multiselectWrapper與否的後裔。

嘗試，

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

Answer 4

試試這個：

$(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