Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > jQuery меню-аккордеон


Автор: Pena 8.8.2014, 14:07
Долгое время пользовался этим меню:
В шапке -
Код

var jQuery_Latest = jQuery;
(function(){
 $(document).ready(function(){
  $('H3').click(function(){
   $(this).next('Ul').slideToggle('medium').siblings('Ul').slideUp('slow');
  });
 });
}(jQuery_Latest));


CSS -
Код

Ul{ display: none }


HTML5 - 
Код

<h3>1</h3>
<ul>
 <li><a href='.../1.1.html' target='_self'>1.1</a></li>
 <li><a href='.../1.2.html' target='_self'>1.2</a></li>
 <li><a href='.../1.3.html' target='_self'>1.3</a></li>
</ul>
<h3>2</h3>
<ul>
 <li><a href='.../2.1.html' target='_self'>2.1</a></li>
 <li><a href='.../2.2.html' target='_self'>2.2</a></li>
 <li><a href='.../2.3.html' target='_self'>2.3</a></li>
 <li><a href='.../2.4.html' target='_self'>2.4</a></li>
</ul>
<h3>3</h3>


Встала задача добавить маркеры к заголовкам (<h3>), имеющим раскрывающиеся подуровни (<ul>). Так чтобы у нераскрытого был один маркер, а у закрытого другой.

Помогите доработать код, пожалуйста - второй день убиваю... у самого не получается.

Автор: Aliance 11.8.2014, 08:20
Ээ, по клику на 1 происходит сперва скрытие 1.*, а потом их открытие? Зачем такое и что должно быть? Может быть карусель - все блоки всегда скрыты, кроме активного? Тогда код изначально должен быть другой немного.

По поводу самой задачи - что конкретно нужно? Поменять текст внутри тегов h3? При активном меню один - при неактивном другой? У вас же внутри колбека клика есть доступ к h3 через $(this).text('bla bla bla')

Автор: Pena 11.8.2014, 13:08
"по клику на 1 происходит сперва скрытие 1.*, а потом их открытие?" - нет, всё скрыто, при клике на 1 выпадает сразу за ним следующий список (<ul>), а все открытые ранее списки закрываются. Т.е. так и работает "карусель - все блоки всегда скрыты, кроме активного"

А можно с примером кода? Я например пытался так: я разместил два изображения нужных маркеров и пытался играться с show() \ hide()  - фиг

Автор: Aliance 11.8.2014, 14:45
http://jsfiddle.net/Aliance/c0ru9by3/

Добавлено через 58 секунд
Но в целом это велосипед: http://jqueryui.com/accordion/

Автор: Pena 11.8.2014, 18:54
Еее... благодарю за подсказку и наводку на полезный ресурс, в итоге получилось http://jsfiddle.net/c0ru9by3/2/

з.ы. Пробывал не только jQuery Ui, но и ряд аналогичных решений - не сраслось (ручки кривые).

Автор: Aliance 12.8.2014, 07:58
У вас там в одном случае next, а в другом siblings - лучше бы определится и использовать что-то одно. Кроме того, зачем вы пишете селекторы в верхнем регистре? smile

Автор: Pena 12.8.2014, 09:03
Исправил, благодарю. 
Просто так привык в CSS писать... это же не ошибка?

Автор: Aliance 12.8.2014, 10:49
Не ошибка, но есть негласные правила стиля программирования (coding style), и html теги, jquery/css селекторы лучше писать в нижнем регистре.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)