点击下拉内容，下拉隐藏

Question

下拉菜单的 HTML 代码：

<ul>
 <li class="dropDownLink">
   Locality
   <ul class="dropDown">
     <li class="dropDown-row"><input tpye="text"></li>
   </ul>
 </li>
 <li class="dropDownLink">
   Locality
   <ul class="dropDown">
     <li class="dropDown-row"><input tpye="checkbox"> Option 1</li>
     <li class="dropDown-row"><input tpye="checkbox"> Option 2</li>
     <li class="dropDown-row"><input tpye="checkbox"> Option 3</li>
   </ul>
 </li>
</ul>

jquery 代码显示下拉菜单：

$('.dropDownLink').on('click', function () {
  $('.dropDown').hide();
  $(this).children($('.dropDown')).show();
});

jQuery 在点击外部下拉菜单时隐藏下拉菜单：

$(document).on('click', function (e) {
  if(!$('.dropDownLink').is(e.target) && !$('.dropDown').is(e.target)) {
    $('.dropDown').hide();
  }
});

单击下拉列表以外的文档时，它工作正常，但单击下拉列表内的内容时，它会隐藏其父下拉列表。下拉菜单中也有一些表单内容，例如输入文本字段、复选框和链接。下拉菜单不应隐藏单击下拉菜单中的这些元素。

请帮我解决这个问题。提前致谢。

Answer 1

更新了精确的解决方案：超特定 DOM 元素定位的建议仍然有效。 jsFiddle Example

var $dropShow = function showList() {
    $('.dropDownLink').on('click', function () {
        $('.dropDown').hide();
        $(this).children($('.dropDown')).show();
    });
};
var $navSelections = $('li.dropDown-row input, li.dropDown-row, ul.dropDown li.dropDown-row input, li.dropDownLink, ul li.dropDownLink');

var $bodyClick = function hideAll() {
    $(this).on('click', function (e) {
        if (!$navSelections.is(e.target)) {
            $('.dropDown').slideUp(150);
        }
    });
};

$('.dropDownLink').not($navSelections).click($dropShow());
$('*').not($navSelections).click($bodyClick());

确定您希望仅在其上执行操作的路径。如果它只应该发生，例如在 div 上，则使用$('div.dropDownLink')。如果只是链接中的链接，比如您希望将此功能应用到的 navMenu，那么您使用$('navMenu div.dropDownLink')。本质上，选择器越准确，结果就越好。

但是，如果您想采用不太准确的方法，您可以使用.not() 方法省略非常具体的内容。

var $parentOfDropDown = $('div#navMenu');
$('.dropDown').not($parentOfDropDown).hide();