Раскрывающаяся по клику мыши ветвь меню средствами jQuery

JavaScript эффекты, при правильном подходе, могут не только приятно радовать глаз посетителя, но еще и повышать юзабилити самого сайта. Сейчас мы рассмотрим, как с помошью jQuery написать обработчик, который при нажатии на элементе списка, имеющего изначально свернутый список дочерних элементов, приведет к его его раскрытию. Такого плана эффект иожно наблюдать при работе с сайтом Google Analytics.

В файле template.php темы прописываем, если еще не прописан, путь к JavaScript файлу:

drupal_add_js(drupal_get_path('theme', 'theme_name') . '/js/jslib.js');

В файле jslib.js, внутри блока jQuery(document).ready(function($){ ... } пишем:

//
// jslib.js
//

jQuery(document).ready(function($){

$('#block-menu-menu-product-catalog ul.menu li ul').hide();
$('#block-menu-menu-product-catalog ul.menu li').click(function() {
    $(this).find('ul').slideToggle();
});
 
})

Вот и все, теперь при нажатии мышью на нужной ветви списка, она будет раскрываться, а при повторном нажатии - закрываться.