Глючит аккордеон

Mila · June 10, 2011

Почему то глючит аккордеон - при нажатии на <span class="parent">текст</span> открывается блок.

При нажатии на следующий елемент <span class="parent">текст</span> - блок открывается, при этом первый открытый блок должен закрываться, а он остается открытым.

Причем возникает этот глюк при использовании:

При использовании версии 1.2.6 все работает нормально.

Вот код:

JSCRIPT:


$(document).ready(function(){
	$(".accordion .parent:first").addClass("active");
	$(".accordion .children:not(:first)").hide();
	$(".accordion .parent").click(function(){
		$(this).next(".children").slideToggle("slow")
		.siblings(".children:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings(".parent").removeClass("active");
	});
});

HTML:


      <ul class="accordion">
          <li><span class="parent active">Авто и Мото </span>
              <ul style="display: none;" class="children">
                  <li><a href="">Перевозки</a></li>
                  <li><a href="">Ремонт, запчасти</a></li>
                  <li><a href="">Тюнинг</a></li>
              </ul>
          </li>
          <li><span class="parent"> Дом и семья </span>
              <ul style="display: none;" class="children">
                  <li><a href="">Мебель</a></li>
                  <li><a href="">Сад и огород</a></li>
                  <li><a href="">Дом и коттедж</a></li>
              </ul>
          </li>
          <li><span class="parent active">Интернет</span>
              <ul style="display: none;" class="children">
                  <li><a href="">Провайдеры</a></li>
                  <li><a href="">Работа в сети</a></li>
                  <li><a href="">Интересное</a></li>
              </ul>
          </li>
      </ul>

Помогите, пожалуйста, исправить это.

ShumNo · June 10, 2011

Заголовок зачеД :rofl:

Баян в студию :lol:

Mila · June 10, 2011

Заголовок зачеД
Баян в студию

Очень смешно.

А по делу можешь что нибудь сказать?

mishka · June 11, 2011

глючит, так как тут:

$(this).next(".children").slideToggle("slow") // следующий .children после элемента по которому кликнули

.siblings(".children:visible").slideUp("slow"); // а это опять тот же .children что и первый раз, так как .siblings ловит "братьев, сестер". Тоесть $(this).siblings(".children:visible") - видимые элементы с классом children, которые имеют общего родителя с $(this), тоесть с тем элементом по которому кликали. Общий родитель - лишка.

я бы так вот делал:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>open/close</title>
    <style>
        .parent.active { color: #f00; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
    <script type="text/javascript">
        $(document).ready(function(){
            $('.accordion').each(function(){
                var el = $('>li',this),
                    slide = $('.children',this),
                    opener = $('.parent',this);

                el.each(function(i){
                    var elOpener = $('.parent',this),
                        elSlide = $('.children',this);

                    if(i == 0) elOpener.addClass('active');
                    else elSlide.hide();

                    elOpener.click(function(){
                        slide.not(elSlide).slideUp('slow');
                        opener.not(elOpener).removeClass('active');
                        elSlide.slideDown('slow');
                        elOpener.addClass('active');
                    })
                })
            })
        });
    </script>
</head>
<body>
    <ul class="accordion">
        <li><span class="parent">Авто и Мото </span>
                <ul class="children">
                <li><a href="">Перевозки</a></li>
                <li><a href="">Ремонт, запчасти</a></li>
                <li><a href="">Тюнинг</a></li>
                </ul>
        </li>
        <li><span class="parent"> Дом и семья </span>
                <ul class="children">
                <li><a href="">Мебель</a></li>
                <li><a href="">Сад и огород</a></li>
                <li><a href="">Дом и коттедж</a></li>
                </ul>
        </li>
        <li><span class="parent">Интернет</span>
                <ul class="children">
                <li><a href="">Провайдеры</a></li>
                <li><a href="">Работа в сети</a></li>
                <li><a href="">Интересное</a></li>
                </ul>
        </li>
        </ul>
</body>
</html>

P.S. Странно что у человека зарегистрированного на этом форуме (наверное чего-то хочет изучить в верстке, или уже изучил) слово аккордион вызвало истерику. Чего со слова "меню" не смеетесь, и не ассоциируете его с рестораном?

psywalker · June 11, 2011

P.S. Странно что у человека зарегистрированного на этом форуме (наверное чего-то хочет изучить в верстке, или уже изучил) слово аккордион вызвало истерику. Чего со слова "меню" не смеетесь, и не ассоциируете его с рестораном?

+1. Тоже кстати юмора вообще не увидел.

ShumNo · June 11, 2011

пошутил немного :blush:

klierik · June 11, 2011

может перенесете топик в соответствующую ветку?

mishka · June 11, 2011

Ага, теперь Mila будет искать куда же ее топик пропал.

psywalker · June 11, 2011

Ага, теперь Mila будет искать куда же ее топик пропал.

Уверен?

Mila · June 11, 2011

mishka, спасибо за помощь - теперь работает отлично.

Единственное, что хотелось бы добавить, возможность закрытия блока по клике на нем.

А то один блок всегда остается открытым.

Это возможно?

Edited June 11, 2011 by Mila

Sign In

Глючит аккордеон

Question

Mila

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

ShumNo

Link to comment

Share on other sites

Mila

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Mila

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information