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

ksana

Полезный
Регистрация
15 Июл 2008
Сообщения
163
Реакции
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>

Помогите, пожалуйста, исправить это.
 
Попробуйте использовать вот такой код:
Код:
<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", и все "дети" прячутся самим аккордионом :)
 
Класс active добавляет сам скрипт открытому блоку.
В моем коде его нет.
 
дальше надо смотреть "окружение" сайта, что еще может влиять на сам скрипт непосредственно. Актуальная версия jquery - 1.6.1
И еще, не совсем понятно как нажатие на SPAN, которого нет в приведенном вами примере кода должно влиять на UL.
 
дальше надо смотреть "окружение" сайта, что еще может влиять на сам скрипт непосредственно. Актуальная версия jquery - 1.6.1
И еще, не совсем понятно как нажатие на SPAN, которого нет в приведенном вами примере кода должно влиять на UL.


Почему нет?

<span class="parent">

В scripte - .accordion .parent:first

Обращение к span идет через класс parent.
 
Покорнейше прошу прощения, виноват, не внимательно сам несколько раз смотрел код. В конце концов усмотрел где там 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();
	});
 
К сожалению, у меня так совсем перестал работать.
 
Назад
Сверху