Я новичок в jQuery и мне нужна помощь, чтобы показать и скрыть div при нажатии. В основном мне нужно показать div (содержащий небольшое меню), когда пользователь нажимает на ссылку, и как только пользователь нажимает на ссылку внутри только что показанного div. Или клики за пределами div, мне нужно снова скрыть div. Мой HTML выглядит примерно так (я буду существовать во многих местах на странице).
<a class="menu" href="#">Menu</a>
<div class="menu-content" style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;">
<div><a href="#">Menu option 1</a></div>
<div><a href="#">Menu option 2</a></div>
</div>
У меня также есть div, который оборачивает всю страницу, и я решил установить еще одно событие click, чтобы скрыть div (чтобы ловить клики за пределами фактического меню).
Является ли это правильным подходом для решения этой проблемы, и как мне затем удалить обработчики в div-обертке и т. Д. И т. Д. Что еще я должен подумать, чтобы получить это право (если это правильный подход)? *
Обновление: Основываясь на принятом ответе ниже, я добавил это, чтобы решить его
//Need to return false here, otherwise the event will bubble up and trigger the hide on body
$('.menu').click(function() { $('.menu-content').hide();$(this).next().show();return false; });
$('body, .menu-content a').click(function() { $('.menu-content').hide();});
$('.menu-content a').click(function() { alert($(this)); });