Меню, выпадающее и сворачивающееся не по hover а по клику
 

Есть меню вверху сайта, горизонтальное, выпадающее, одноуровневое, которое выпадает и сворачивается не по 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') ну и далее по тексту

да, $(this).next()