Раскрывающаяся по клику мыши ветвь меню средствами 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();
});
 
})

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

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <s> <u> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <hr> <dd> <sub> <sup>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Строки и параграфы переносятся автоматически.
CAPTCHA
Защита от СПАМ ботов. Подтвердите, пожалуйста, что вы человек.
11 + 4 =
Решите эту простую математическую задачу и введите результат. Например, для 1+3, введите 4.