щелчок по раскрывающемуся содержимому, раскрывающийся список скрывается

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

При нажатии на документ, отличный от раскрывающегося списка, он работает нормально, но при нажатии на содержимое внутри раскрывающегося списка скрывается родительский раскрывающийся список. В раскрывающемся списке также есть некоторое содержимое формы, например текстовое поле ввода, флажки и ссылки. Выпадающий список не должен скрывать нажатие на эти элементы внутри выпадающего списка.

Пожалуйста, помогите мне с этим. Заранее спасибо.


drop-down-menu click jquery css mouseclick-event
person Ashwani Sharma    schedule 01.08.2015    source источник
comment
Привет, Ашвани, я создал решение в своем основном ответе. Я использовал селектор $('*') вместо $(document). Затем я создал строку элементов DOM, связанных с меню навигации, чтобы исключить привязку к функции on('click'). Я надеюсь, что это приведет вас туда. Да благословит тебя Бог.   -  person Alexander Dixon    schedule 02.08.2015
comment
Рабочий пример   -  person Alexander Dixon    schedule 02.08.2015

Ответы (1)


arrow_upward
2
arrow_downward

Обновлено с точным решением: совет по нацеливанию на сверхспецифический элемент DOM остается в силе. Пример jsFiddle

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();
person Alexander Dixon    schedule 01.08.2015
comment
Просто использовал это, но это не работает. Я также обновил свой вопрос с помощью своего HTML. Пожалуйста, посмотрите сейчас, если это может помочь. - person Ashwani Sharma; 01.08.2015