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

点击下拉内容，下拉获取隐藏

1 个答案: