点击下拉内容，下拉得到隐藏 [英] 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.

请帮助我。

推荐答案

更正了具体的解决方案：超级特定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，那么你使用 $（'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.

然而，如果你想采取不那么精确的方法，你可以使用<$ c $

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屋！