jQuery в помощь: Accordion menu

Оригинал статьи: Soh Tanaka СС-лицензия:

Опубликовано 24.05.10 / Автор перевода: Иван Саломатин

comments Комментариев 0

В этой статье я покажу как очень быстро и без особых усилий создать ВОТ ТАКОЕ ДИНАМИЧЕСКОЕ МЕНЮ с помощью jQuery, CSS и, конечно, вашей фантазии. :)

Формируем основу - HTML

Html-разметка довольно проста: <h2> и сразу за ним <div class="acc_container">. <h2> будет выступать в качестве заголовка панели. Мы будем использовать этот элемент в качестве триггера (пускового крючка) для нашего jQuery-сценария. А вот <div class="acc_container"> – это будет скользящий вверх-вниз элемент, содержащий контент.

  <h2 class="acc_trigger"><a  href="#">Заголовок элемента</a></h2>
  <div  class="acc_container">
  <div class="block">
  <!—содержимое элемента  -->
  </div>
  </div>

Оформляем меню – CSS

На этапе оформления особое внимание следует уделить двум важным моментам:

Значение параметра width у класса .acc_container должно быть строго фиксированной величиной (т.е. не должно быть задано в % или em). Это позволит предотвратить jQuery-баг, заключающийся в прыжке/скачке меню при движении вниз (происходит, когда меню почти достигло нижней точки). Существуют и другие способы обхода этой ошибки, но такой подход кажется мне более простым и эффективным.
Добавляем свойство padding для стиля элемента, родственного элементу с классом .acc_container (в данном примере это элемент <div class="block"> - прим. переводчика). Это убережёт нас от другого бага – изменения значения внутреннего отступа (padding) во время открытия/закрытия панели.

  h2.acc_trigger {
  padding: 0;
  margin: 0 0 5px 0;
  background:  url(h2_trigger_a.gif) no-repeat;
  height: 46px;
  line-height: 46px;
  width: 500px;
  font-size: 2em;
  font-weight: normal;
  float: left;
  }
  h2.acc_trigger a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 0 0 0 50px;
  }
  h2.acc_trigger a:hover  {
  color: #ccc;
  }
  h2.active  {background-position: left bottom;}
  .acc_container {
  margin: 0 0 5px;
  padding:  0;
  overflow: hidden;
  font-size: 1.2em;
  width: 500px;
  clear: both;
  background: #f0f0f0;
  border: 1px solid #d6d6d6;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  }
  .acc_container .block  {padding: 20px;}

jQuery-сценарий

Рекомендация: Тем, кто не знаком с jQuery, прежде чем двигаться дальше, следует познакомиться с этой библиотекой, дабы понять основополагающие принципы работы с ней.

Итак, первое, что необходимо сделать – это подключить библиотеку jQuery. Тут вы вольны выбирать: вы можете загрузить файл библиотеки с официального сайта, либо подключить файл, находящийся в «гуглохранилище» (специальный хостинг файлов, предоставляемый компанией Google)

  <script  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Следующей строчкой после той, которой вы подключили jQuery, начните новый сценарий (<script>), инициировав событие $(document).ready . Это позволит вам запустить сценарий незамедлительно после того, как страница будет полностью загружена браузером. Весь код, который вам предстоит написать на нескольких следующих шагах следует поместить внутри функции:

  $(document).ready(function()  {
  //Code goes here
  });

Теперь, с помощью jQuery оживляем наше меню. Следующий код сопровождён комментариями, которые призваны подробно растолковать все действия совершаемые сценарием.

  //Выставляем базовые настройки открыто/закрыто
  $('.acc_container').hide(); //схлопываем (закрываем) все  панели (контейнеры)

  $('.acc_trigger:first').addClass('active').next().show(); //Добавляем класс "active" к первому триггеру  (у нас это – h2), а затем  раскрываем следующий сразу за ним контейнер.
  //По клику
  $('.acc_trigger').click(function(){
  if( $(this).next().is(':hidden') ) { //Если следующий  сразу за триггером контейнер закрыт, то…
  $('.acc_trigger').removeClass('active').next().slideUp(); //Убираем класс "active" и схлопываем открытый  контейнер
  $(this).toggleClass('active').next().slideDown(); // Добавляем класс "active" к триггеру, на котором  был произведён щелчок мышкой, и разворачиваем следующий за ним контейнер.
  }
  return false; //Завершаем обработку события  – прерываем цикл

  });

Логика – Как же это работает?

relations

Первая пара строк делает изначально открытым первый контейнер.
При наступлении события click (щелчок мышкой на любом из заголовков панелей) сценарий определяет: открыт или закрыт контейнер, следующий за нажатым заголовком.
Если контейнер закрыт, то…
Со всех триггеров убирается класс .active и схлопываются все контейнеры (.acc_container).
Нажатому триггеру $(this) добавляется класс .active, а следующий за ним контейнер открывается.