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

Тема в разделе "Другие языки", создана пользователем ksana, 10 июн 2011.

Модераторы: Цукер
  1. ksana

    ksana

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

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

    Причем возникает этот глюк при использовании:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    При использовании версии 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>
    Помогите, пожалуйста, исправить это.
     
  2. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    Попробуйте использовать вот такой код:
    Код:
    <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>
    Разница с приведенным Вами - у всех ul class "parent", а не "parent active", и все "дети" прячутся самим аккордионом :)
     
  3. ksana

    ksana

    Регистр.:
    15 июл 2008
    Сообщения:
    160
    Симпатии:
    15
    Класс active добавляет сам скрипт открытому блоку.
    В моем коде его нет.
     
  4. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    дальше надо смотреть "окружение" сайта, что еще может влиять на сам скрипт непосредственно. Актуальная версия jquery - 1.6.1
    И еще, не совсем понятно как нажатие на SPAN, которого нет в приведенном вами примере кода должно влиять на UL.
     
  5. ksana

    ksana

    Регистр.:
    15 июл 2008
    Сообщения:
    160
    Симпатии:
    15

    Почему нет?

    <span class="parent">

    В scripte - .accordion .parent:first

    Обращение к span идет через класс parent.
     
  6. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    Покорнейше прошу прощения, виноват, не внимательно сам несколько раз смотрел код. В конце концов усмотрел где там span.
    Исправляю ошибку.

    Вот так код работает адекватно:
    Код:
    $(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");
    		$(".accordion .parent").not(this).removeClass("active").next(".children").hide();
    	});
     
  7. ksana

    ksana

    Регистр.:
    15 июл 2008
    Сообщения:
    160
    Симпатии:
    15
    К сожалению, у меня так совсем перестал работать.