Форум русской поддержки Joomla!® CMS
06.12.2016, 07:03:24 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Сворачивание аккордеона

 (Прочитано 579 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Error222
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 64



« : 21.05.2015, 12:53:31 »

Доброго времени суток гуру
Сделал меню аккордеон при помощи стандартного модуля и jquery сделал написанно тут
Код такой
Код:
function initMenu() {
  jQuery('.menu ul').hide();
  jQuery('.menu li.active ul').show();
  jQuery('.menu li .separator').click(
    function() {
        jQuery(this).next().slideToggle('normal');  
      }
    );
  }
jQuery(document).ready(function() {initMenu();});

Прошу помощи, как сделать так чтоб при нажатии на пункт меню предыдущий автоматом сворачивался.
Показать текстовый блок
?
Заранее благодарен
Записан
04r12
Осваиваюсь на форуме
***

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 176


Позитив есть! Чего и вам желаю=)


« Ответ #1 : 26.05.2015, 09:37:08 »

Эм...а зачем изобретать велосипед? Если Вам в материале нужно подобное изобразить, используйте jq_tabs_accordion или аналоги (их тьма), если меню, используйте, например, Accordion Menu, там все в настройках элементарно выставляется
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #2 : 26.05.2015, 09:40:25 »

ну чего ты ругашься?! у человека интузиазм и код ровный.зачем ты так?
ТС я бы клик в квери заменил и прописал для дивов с CSS классами, вдруг кому надо.
*** как свернуть=переписать 2 строки квери.
именно код дать или что?
« Последнее редактирование: 26.05.2015, 09:43:51 от vipiusss » Записан
04r12
Осваиваюсь на форуме
***

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 176


Позитив есть! Чего и вам желаю=)


« Ответ #3 : 26.05.2015, 09:43:30 »

Цитировать
ну чего ты ругашься?! у человека интузиазм и код ровный.зачем ты так?
laugh Так может ну ее, CMS эту? А чего, давайте с энтузиазмом на HTML сайты писать, как в старые добрые laugh
Не ругаюсь я, просто высказываю некоторую долю своего непонимания по поводу вопроса ТС=)
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #4 : 26.05.2015, 09:45:28 »

чтото мне напоминает тема, не помощь ТС, а по***еть...
Сорри за мат
***
по теме-он хочет переписать квери.
Записан
Error222
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 64



« Ответ #5 : 12.06.2015, 16:20:31 »

ну чего ты ругашься?! у человека интузиазм и код ровный.зачем ты так?
ТС я бы клик в квери заменил и прописал для дивов с CSS классами, вдруг кому надо.
*** как свернуть=переписать 2 строки квери.
именно код дать или что?

Да прошу кода, просто в больнице лежал тока выписался. Если еще актуально поможите?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #6 : 12.06.2015, 23:29:38 »

ну можно модулем, можно кодом, выбирай
Записан
Error222
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 64



« Ответ #7 : 14.06.2015, 23:17:01 »

ну можно модулем, можно кодом, выбирай
Если можно кодом, а модуль какой вы имели ввиду?
Записан
Error222
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 64



« Ответ #8 : 23.06.2015, 11:20:35 »

Есть кто нибудь живой?
Записан
04r12
Осваиваюсь на форуме
***

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 176


Позитив есть! Чего и вам желаю=)


« Ответ #9 : 26.06.2015, 06:30:54 »

Цитировать
а модуль какой вы имели ввиду?
См. второе сообщение. А вообще их тьма подобных
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #10 : 26.06.2015, 07:00:40 »

Ни разу нигде разметка не написана, но предположим, что она такая:

Код
<ul class="menu">
<li>
<span class="separator">Первый</span>
<ul>
<li>первый раз</li>
<li>первый два</li>
<li>первый три</li>
</ul>
</li>
<li>
<span class="separator active">Второй</span>
<ul>
<li>второй раз</li>
<li>второй два</li>
<li>второй три</li>
</ul>
</li>
<li>
<span class="separator">Третий</span>
<ul>
<li>третий раз</li>
<li>третий два</li>
<li>третий три</li>
</ul>
</li>
</li>


Код
function initMenu() {
jQuery('.menu .active').parent().siblings().children('ul').hide(); //скрываем все, кроме активного
jQuery('.menu .separator').click(
function() {
jQuery(this)
.AddClass('active') //добавляем текущему сепаратору активный класс
.siblings().slideDown() //показываем соответствующий блок
.parent().siblings().children('ul').slideUp()  //скрываем неактивный пункт
.siblings('.separator').RemoveClass('active'); //удаляем старый активный класс
 
}
);
}
jQuery(document).ready(function() {initMenu();});
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #11 : 26.06.2015, 07:02:15 »

Шустрый красавчик!....Я уже думал помогать сидеть, а тут такая шара! Спасибо! Roll Eyes drink
(плюсанул)
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #12 : 26.06.2015, 07:04:53 »

Шустрый красавчик!....Я уже думал помогать сидеть, а тут такая шара! Спасибо! Roll Eyes drink
Незачто. Должно работать, проверить не на чем. В примере ТС был существенный недостаток — активный класс не присваивался/убирался. Исправил. Если ещё подключить JQ куки - плагин, то можно будет активность сохранять при релоаде. Если надо, пишите, переделаю.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #13 : 26.06.2015, 07:45:28 »

Так в дивы бы сразу и CSS для наглядности, а то уверен, будет скоро вопрос)))
может и ошибаюсь и именно код нужен и ТС сам решит с дивами своими.
***
а потом инсталаяху, и модуль готов)))  Roll Eyes
И раздел создать=Шустрые модули  Grin
(прости, острю, настроение с утра)
« Последнее редактирование: 26.06.2015, 07:50:39 от vipiusss » Записан
Error222
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 64



« Ответ #14 : 26.06.2015, 11:42:44 »

Ни разу нигде разметка не написана, но предположим, что она такая:

Код
<ul class="menu">
<li>
<span class="separator">Первый</span>
<ul>
<li>первый раз</li>
<li>первый два</li>
<li>первый три</li>
</ul>
</li>
<li>
<span class="separator active">Второй</span>
<ul>
<li>второй раз</li>
<li>второй два</li>
<li>второй три</li>
</ul>
</li>
<li>
<span class="separator">Третий</span>
<ul>
<li>третий раз</li>
<li>третий два</li>
<li>третий три</li>
</ul>
</li>
</li>


Код
function initMenu() {
jQuery('.menu .active').parent().siblings().children('ul').hide(); //скрываем все, кроме активного
jQuery('.menu .separator').click(
function() {
jQuery(this)
.AddClass('active') //добавляем текущему сепаратору активный класс
.siblings().slideDown() //показываем соответствующий блок
.parent().siblings().children('ul').slideUp()  //скрываем неактивный пункт
.siblings('.separator').RemoveClass('active'); //удаляем старый активный класс
 
}
);
}
jQuery(document).ready(function() {initMenu();});


Не работает, все пункты остаются свернутыми.

Разметка таже что вы описали, класс не добавляется при клике
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #15 : 26.06.2015, 12:13:10 »

ппц вы.
ладно, вставлю свои 5 копеек:
Код:
$('#celebs ul > li ul')
  .click(function(event){
    event.stopPropagation();
  })
  .filter(':not(:first)')
  .hide();
и всё, все довольны, просто аккордеон.
Код:
<ul>
  <li class="active">
первый
    <ul>
      <li><a href="#">1!</li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
  <li>
 второй
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
    </ul>
  </li>
...
</ul>
вот что вы там куча кода? вот вам простой аакордеон, а далее насыщайте дивами, классами, как уже сами захотите
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #16 : 26.06.2015, 12:19:06 »

дополню навсяк
Код:
$('p:not(.active)')
это всё, котрое не имеет класс актив.
Код:
$(':not(p)')
это всё, кроме.

Вот и играйтесь "правами"

т.е. not выбирает всё, что ему посылается ( в скобках выбирает)
***
Шустрый, поправь, пожалуйста, код, если немного лохонулся где-то...(только с разъяснением, что я знал на будущее)
« Последнее редактирование: 26.06.2015, 12:27:05 от vipiusss » Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #17 : 26.06.2015, 13:05:38 »

Код
	$('.menu .active').parent().siblings().children('ul').hide(); //скрываем все, кроме активного
$('.menu .separator').on('click', function(){
               $(this).addClass('active')
.siblings().slideDown()
.parent().siblings().children('ul').slideUp();
               $(this).parent().siblings().children('.separator').removeClass('active');
   }
);

Демо
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #18 : 26.06.2015, 13:10:27 »

О, Шустрые модули так и просятся  Roll Eyes
***
По теме, Шустрый, а что, не проще парент нотом заменить? или я Неправильно написал? у меня работает, проверял.
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #19 : 26.06.2015, 13:38:10 »

Да без разницы. Мне нравится так элементы перебирать. Кому-то по-другому. Дело вкуса.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet