Реализует простую делегацию события: обработчик нажатия добавляет неупорядоченный список, и дети детей тега li являются скрытыми. Нажатие на одном из детей li переключает ( см. toggle() ) режим показа его детей.

Измените код и нажмите здесь	Ваш результат (Некоторые примеры не работают в браузере Google Chrome):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children().toggle(); } } $("ul").click(handler).find("ul").hide(); }); </script> </head> <body> <ul> <li>item 1 <ul> <li>sub item 1-a</li> <li>sub item 1-b</li> </ul> </li> <li>item 2 <ul> <li>sub item 2-a</li> <li>sub item 2-b</li> </ul> </li> </ul> </body> </html>
Измените указанный выше код и нажмите на кнопку, чтобы увидеть результат	www.xhtml.co.il - Попробуйте сами