0 Пользователей и 1 Гость просматривают эту тему.
  • 19 Ответов
  • 879 Просмотров
*

Error222

  • Осваиваюсь на форуме
  • 64
  • 0
Сворачивание аккордеона
« : 21.05.2015, 11: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

  • Осваиваюсь на форуме
  • 168
  • 9
  • Позитив есть! Чего и вам желаю=)
Re: Сворачивание аккордеона
« Ответ #1 : 26.05.2015, 08:37:08 »
Эм...а зачем изобретать велосипед? Если Вам в материале нужно подобное изобразить, используйте jq_tabs_accordion или аналоги (их тьма), если меню, используйте, например, Accordion Menu, там все в настройках элементарно выставляется
Есть цель? Иди к ней! Не можешь идти? Ползи к ней! Не можешь ползти? ляг и лежи в направлении цели!=)
*

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #2 : 26.05.2015, 08:40:25 »
ну чего ты ругашься?! у человека интузиазм и код ровный.зачем ты так?
ТС я бы клик в квери заменил и прописал для дивов с CSS классами, вдруг кому надо.
*** как свернуть=переписать 2 строки квери.
именно код дать или что?
« Последнее редактирование: 26.05.2015, 08:43:51 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

04r12

  • Осваиваюсь на форуме
  • 168
  • 9
  • Позитив есть! Чего и вам желаю=)
Re: Сворачивание аккордеона
« Ответ #3 : 26.05.2015, 08:43:30 »
Цитировать
ну чего ты ругашься?! у человека интузиазм и код ровный.зачем ты так?
:laugh: Так может ну ее, CMS эту? А чего, давайте с энтузиазмом на HTML сайты писать, как в старые добрые :laugh:
Не ругаюсь я, просто высказываю некоторую долю своего непонимания по поводу вопроса ТС=)
Есть цель? Иди к ней! Не можешь идти? Ползи к ней! Не можешь ползти? ляг и лежи в направлении цели!=)
*

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #4 : 26.05.2015, 08:45:28 »
чтото мне напоминает тема, не помощь ТС, а по***еть...
Сорри за мат
***
по теме-он хочет переписать квери.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Error222

  • Осваиваюсь на форуме
  • 64
  • 0
Re: Сворачивание аккордеона
« Ответ #5 : 12.06.2015, 15:20:31 »
ну чего ты ругашься?! у человека интузиазм и код ровный.зачем ты так?
ТС я бы клик в квери заменил и прописал для дивов с CSS классами, вдруг кому надо.
*** как свернуть=переписать 2 строки квери.
именно код дать или что?

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

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #6 : 12.06.2015, 22:29:38 »
ну можно модулем, можно кодом, выбирай
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Error222

  • Осваиваюсь на форуме
  • 64
  • 0
Re: Сворачивание аккордеона
« Ответ #7 : 14.06.2015, 22:17:01 »
ну можно модулем, можно кодом, выбирай
Если можно кодом, а модуль какой вы имели ввиду?
*

Error222

  • Осваиваюсь на форуме
  • 64
  • 0
Re: Сворачивание аккордеона
« Ответ #8 : 23.06.2015, 10:20:35 »
Есть кто нибудь живой?
*

04r12

  • Осваиваюсь на форуме
  • 168
  • 9
  • Позитив есть! Чего и вам желаю=)
Re: Сворачивание аккордеона
« Ответ #9 : 26.06.2015, 05:30:54 »
Цитировать
а модуль какой вы имели ввиду?
См. второе сообщение. А вообще их тьма подобных
Есть цель? Иди к ней! Не можешь идти? Ползи к ней! Не можешь ползти? ляг и лежи в направлении цели!=)
*

Shustry

  • Группа развития
  • 6430
  • 735
  • Рисую дизайны
Re: Сворачивание аккордеона
« Ответ #10 : 26.06.2015, 06:00:40 »
Ни разу нигде разметка не написана, но предположим, что она такая:

Код: html4strict
<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>


Код: javascript
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();});
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #11 : 26.06.2015, 06:02:15 »
Шустрый красавчик!....Я уже думал помогать сидеть, а тут такая шара! Спасибо! ::) *DRINK*
(плюсанул)
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Группа развития
  • 6430
  • 735
  • Рисую дизайны
Re: Сворачивание аккордеона
« Ответ #12 : 26.06.2015, 06:04:53 »
Шустрый красавчик!....Я уже думал помогать сидеть, а тут такая шара! Спасибо! ::) *DRINK*
Незачто. Должно работать, проверить не на чем. В примере ТС был существенный недостаток — активный класс не присваивался/убирался. Исправил. Если ещё подключить JQ куки - плагин, то можно будет активность сохранять при релоаде. Если надо, пишите, переделаю.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #13 : 26.06.2015, 06:45:28 »
Так в дивы бы сразу и CSS для наглядности, а то уверен, будет скоро вопрос)))
может и ошибаюсь и именно код нужен и ТС сам решит с дивами своими.
***
а потом инсталаяху, и модуль готов)))  ::)
И раздел создать=Шустрые модули  ;D
(прости, острю, настроение с утра)
« Последнее редактирование: 26.06.2015, 06:50:39 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Error222

  • Осваиваюсь на форуме
  • 64
  • 0
Re: Сворачивание аккордеона
« Ответ #14 : 26.06.2015, 10:42:44 »
Ни разу нигде разметка не написана, но предположим, что она такая:

Код: html4strict
<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>


Код: javascript
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

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #15 : 26.06.2015, 11: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>
вот что вы там куча кода? вот вам простой аакордеон, а далее насыщайте дивами, классами, как уже сами захотите
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #16 : 26.06.2015, 11:19:06 »
дополню навсяк
Код
$('p:not(.active)')
это всё, котрое не имеет класс актив.
Код
$(':not(p)')
это всё, кроме.

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

т.е. not выбирает всё, что ему посылается ( в скобках выбирает)
***
Шустрый, поправь, пожалуйста, код, если немного лохонулся где-то...(только с разъяснением, что я знал на будущее)
« Последнее редактирование: 26.06.2015, 11:27:05 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Группа развития
  • 6430
  • 735
  • Рисую дизайны
Re: Сворачивание аккордеона
« Ответ #17 : 26.06.2015, 12:05:38 »
Код: javascript
	$('.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');
      }
);

Демо
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5594
  • 322
  • Круглая ава-зло!
Re: Сворачивание аккордеона
« Ответ #18 : 26.06.2015, 12:10:27 »
О, Шустрые модули так и просятся  ::)
***
По теме, Шустрый, а что, не проще парент нотом заменить? или я Неправильно написал? у меня работает, проверял.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Группа развития
  • 6430
  • 735
  • Рисую дизайны
Re: Сворачивание аккордеона
« Ответ #19 : 26.06.2015, 12:38:10 »
Да без разницы. Мне нравится так элементы перебирать. Кому-то по-другому. Дело вкуса.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться