点击下拉内容，下拉隐藏 [英] clicking on dropdown content, dropdown getting hide

问题描述

下拉菜单的 HTML 代码:

HTML code for dropdowns:

<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代码:

jquery Code to show dropdown:

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

jQuery 隐藏下拉菜单之外的下拉菜单:

jQuery to hide dropdowns on clicking outside dropdown:

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

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

When clicking on document other than dropdown its working fine but clicking on content inside dropdown its hiding its parent dropdown. There are some form contents as well in dropdown like input textfield, checkboxes and links. Dropdown should not hide clicking on these elements inside dropdown.

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

Please help me with this. Thanks in Advance.

推荐答案

更新了精确的解决方案:超级特定 DOM 元素定位的建议仍然有效.jsFiddle 示例

Updated with exact solution: The advice of super specific DOM element targeting still stands. 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 div.dropDownLink').本质上，选择器越准确，结果就越好.

Pinpoint the pathing that you want the action to occur on only. If it is only supposed to occur, for example on a div, then use $('div.dropDownLink'). If it is only links in say, a navMenu that you want this functionality applied to, then you use $('navMenu div.dropDownLink'). Essentially, the more accurate your selector the better the results will be.

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

If however, you would like to take the not so accurate approach you can use the .not() method to leave out very specific things.

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

这篇关于点击下拉内容，下拉隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！