点击下拉内容，下拉隐藏

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

点击下拉内容，下拉隐藏

clicking on dropdown content, dropdown getting hide

css

jquery

click

mouseclick-event

drop-down-menu