1

В одном из своих вопросов я спрашивал, как можно открывать и закрывать hamburger-меню с помощью кнопки, а также кликом вне открытого меню, при этом кнопка находилась поверх меню. К сожалению, не сумел применить эти знания к случаю, когда кнопка находится не поверх меню, а, например, рядом с ним.

$('#menu-button').click(function(){
       $("#menu-field").show('slow');
       event.stopPropagation();
    });
};

$(document).click(function() {
    if( this.id !== 'menu-field"') {
      $("#menu-field").hide('slow');
    }
});

Такой код не закрывает меню нажатием кнопки.

Как и в предыдущем вопросе, коротко задачу можно описать так: сделать так, чтобы при нажатии на кнопку происходило только одно событие.

Другая проблема в данной задачи в том, что её едва ли можно решить без использования глобальных объектов (как document). Это выражается в том, что если мы объявим переменную-переключатель (типа menuShown = false) или функцию-рычаг (типа showMenu()), они не будут видны во втором блоке кода.

1 ответ 1

2

Для этой задачи можно использовать event.target и Jquery функцию closest

$('#menu-button').click(function(){
  $("#menu-field").show('slow');
  event.stopPropagation();
});

$(document).click(function(event) {
  if($(event.target).closest('#menu-field').length == 0){
    $("#menu-field").hide('slow');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menu-button">Кнопка</button>

<p id="menu-field" style="display:none;">Текст. <span>А это внутренний элемент</span></p>

3
  • Благодарю Вас за решение. К сожалению, нажатие кнопки с целью скрыть текст не приводит к его изчезновению. Commented 17 янв. 2017 в 8:10
  • @GurebuBokofu все правильно, у вас же show написано. Commented 17 янв. 2017 в 9:24
  • Прошу прощения, Вы правы. Значит надо на toggle заменить. Ещё раз благодарю Вас за ответ. Commented 17 янв. 2017 в 12:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.