Рассмотрим пример реализации вертикального меню-аккордиона на jQuery. Глобальных отличий от примера «гармошки» на jQuery опубликованного ранее в нашем блоге нет. Можно сказать, что данный пример может послужить дополнением к тому посту. Так или иначе, давайте рассмотрим пример.
CSS стили меню:
<style type="text/css"> ul.akkordeon { width:500px; list-style:none; } ul.akkordeon li > p { cursor:pointer; color:#778899; font-size:12px; font-family:Verdana; border-bottom:1px dashed #c4c4c4; } ul.akkordeon li > div { display:none; padding:10px; font-size:12px; line-height:15px; } </style>
Разметка меню:
<ul class="akkordeon"> <li> <p>Как выбрать нишу для своего первого бизнеса?</p> <div> Для многих потенциальных предпринимателей и бизнесменов главной причиной долгого старта или вообще отказа от собственного дела является неумение подбирать идеальную нишу для будущей деятельности. Это только на словах все выглядит просто и понятно... </div> </li> <li> <p>Новый вид развлечений — квесты в реальности</p> <div> Начиная с прошлого (2013) года, это новое в нашей стране развлечение покоряет сердца тысяч игроков по всей стране. Фанатов квестов в реальности становится все больше и больше. Да и самих компаний, организующих необычное развлечение, открывается большое количество... </div> </li> <li> <p>Что заставляет вас продолжать работать на дядю?</p> <div> Сколько будут существовать бизнес и работа по найму, столько и будет продолжаться спор между предпринимателями и наемными работниками. Одни считают, что нет ничего лучше стабильной работы на кого-то... </div> </li> <li> <p>Другим примером региональной компенсации</p> <div> Другим примером региональной компенсации может служить ламинарное движение анизотропно высвобождает блеск, что свидетельствует о проникновении днепровских льдов в бассейн Дона. Грабен анизотропно смещает фирновый алмаз, в то время как значения максимумов изменяются в широких пределах... </div> </li> </ul>
Код jQuery (Вариант 1):
Первый вариант допускает открытие множества пунктов параллельно.
<script type="text/javascript"> $(document).ready(function(){ $('ul.akkordeon li > p').click(function(){ $(this).toggleClass('active'); $(this).next('div').slideToggle(200); }); }); </script>
Код jQuery (Вариант 2):
В этом варианте меню сворачивается автоматически, т.е. при активации одного пункта все остальные открытые сворачиваются.
<script type="text/javascript"> $(document).ready(function(){ $('ul.akkordeon2 li > p').click(function(){ if(!$(this).hasClass('active')){ $('ul.akkordeon2 li > p').removeClass('active').next('div').slideUp(); $(this).addClass('active'); $(this).next('div').slideDown(200); } else { $(this).removeClass('active').next('div').slideUp(); } }); }); </script>
Здравствуйте, хороший гайд, спасибо помогли. Но вы перепутали 1ый и 2ой вариант(код jQuery).
Спасибо за отзыв, исправил!