Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как сделать несколько раскрывающихся списков с отдельными заголовками. (https://javascript.ru/forum/jquery/39382-kak-sdelat-neskolko-raskryvayushhikhsya-spiskov-s-otdelnymi-zagolovkami.html)

Lavrov 27.06.2013 17:32

Как сделать несколько раскрывающихся списков с отдельными заголовками.
 
Вообщем, ситуация такая: Есть отдельный блок-заголовок. И блок-контента. При нажатии на заголовок блок должен свернуться. При повторном - раскрыться обратно. Оба блока отдельные, не являющиеся родителями друг другу. Проблема в том, что данный код (заголовок+блок) генерируется шаблоном. Количество таких связок предсказать нельзя (их может быть 1 или несколько). Блокам контента присвоен один класс и написана процедура изначально их скрывающая. Блокам-заголовкам присвоен айдишник, при нажатии на который необходимо раскрыть соответствующий блок. Проблема в том, что каждому такому блоку (заголовок+контент) необходимо присвоить айдишник. Например #id1, #id2 и т.д. Ведь иначе при нажатии на любой заголовок будут открываться и закрываться все блоки контента, а не те, которые соответствуют заголовкам. Необходимо написать функцию, которая будет поочерёдно присваивать айдишники заголовку и его блоку контента, а потом написать соотв. процедуры для их раскрытия и закрытия. Я сделал так:

$('#hide_me1, #hide_me2, #hide_me3').hide();
    $('#show_me1').toggle(
      function(){
        $('#hide_me1').slideDown(500);
      }, 
     function(){
        $('#hide_me1').slideUp(500);
     })
	 $('#show_me2').toggle(
      function(){
        $('#hide_me2').slideDown(500);
      }, 
     function(){
        $('#hide_me2').slideUp(500);
     })
	 $('#show_me3').toggle(
      function(){
        $('#hide_me3').slideDown(500);
      }, 
     function(){
        $('#hide_me3').slideUp(500);
     }
   );


То есть сначала скрываем все блоки-контенты (hide_me) а затем каждом заголовку прописываю открывание-закрывание. Но так как количество таких блоко предугадать сложно, то возникает проблема автоматического создания таких процедур в нужном количестве. Блин надеюсь понятно описал.

Lavrov 27.06.2013 17:58

Всё, не надо) Разобрался с помощью .next()

animhotep 27.06.2013 18:00

Цитата:

Сообщение от Lavrov
При нажатии на заголовок блок должен свернуться

а где в приведённом коде обработка нажатия?
покажите кусок хтмл, не обязательно чтоб контент сразу после заголовка шел


Часовой пояс GMT +3, время: 00:08.