Есть меню вверху сайта, горизонтальное, выпадающее, одноуровневое, которое выпадает и сворачивается не по mousein/mouseout, а по клику на заголовке меню (т.е. по прямоугольнику li, если смотреть на него в свёрнутом состоянии и аналогичной его области в его развёрнутом состоянии):
$().ready(function() {
$('div#usermenu li').click(function () {
$(this).find('div.expand').slideToggle('fast');});
});
<div id="usermenu">
<ul>
<li>
title
<div class="expand">content</div>
</li>
</ul>
</div>
При таком раскладе, сворачивание происходит при клике в любом месте div.expand (т.к. div.expand является частью li, то клик происходит по li, что вызывает его сворачивание).
Как можно сделать так, чтобы сворачивался он только при клике по загаловку?
мне в голову приходит только вставить в li ссылку <a> и разворачивание/сворачивание производить по клику на ней, но не знаю, как это можно сделать. Надеюсь, что есть какой-нибудь метод, который будет делать примерно такое:
$первый_родительский_тэг('div#usermenu a') ну и далее по тексту
