Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2013, 12:39
Новичок на форуме
Отправить личное сообщение для maincg Посмотреть профиль Найти все сообщения от maincg
 
Регистрация: 20.06.2013
Сообщений: 4

Класс для dt
Добрый день!

Есть следующая структура (меню с эффектом accordion):
<dl id="left_menu">
  <dt>Item 1</dt>
  <dt>Item 2</dt>
    <dd>SubItem 2.1</dd>
  <dt>Item 3</dt>
    <dd>SubItem 3.1</dd>
  <dt>Item 4</dt>
  <dt>Item 5</dt>
</dl>


Если кликнуть на dt, которые не содержат dd, нужен class="active", а если содержат - class="arrow".

Пробовал функции: next(), nextUntil(), siblings(), is(), но безрезультатно.

Оригинальный код:
var item = menu.find('dt');
var subitems = menu.find('dd');

item.click(function (event) {

	item.removeClass('active');
	$(this).addClass('active');

	var subitem = $(this).next('dd:first');

	if( subitem.length == 0 ){
		subitems.removeClass('active').slideUp();
	}

	if (typeof (subitem) == 'object')
		if (subitem.length > 0) {
			if (subitem.is('.active'))
				subitem.removeClass('active').slideUp();
			else {
				subitems.removeClass('active').slideUp();
				subitem.addClass('active').slideDown();
			}
			event.preventDefault();
			event.stopPropagation();
		}
});
subitems.hide();


Направьте, пожалуйста, на путь истинный!

Заранее благодарен
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2013, 13:00
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от maincg
которые не содержат dd
у вас ни один DT не содержит DD
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2013, 13:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от maincg
dt, которые не содержат dd
может идут следом? в вашем примере структуры нет dt содержащих dd
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2013, 13:09
Новичок на форуме
Отправить личное сообщение для maincg Посмотреть профиль Найти все сообщения от maincg
 
Регистрация: 20.06.2013
Сообщений: 4

Да, идут следом, "не содержат" - я не правильно выразился. Прошу прощения! Если бы была вложенность, то children() решил проблему
Ответить с цитированием
  #5 (permalink)  
Старый 20.06.2013, 13:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

maincg,
Вариант...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">
   dd{
     display: none;
   }

    </style>
</head>

<body>
  <dl id="left_menu">
  <dt>Item 1</dt>
  <dt>Item 2</dt>
    <dd>SubItem 2.1</dd>
  <dt>Item 3</dt>
    <dd>SubItem 3.1</dd>
  <dt>Item 4</dt>
  <dt>Item 5</dt>
    <dd>SubItem 5.1</dd>
</dl>
 <script>
  $('dt').click(function (event) {
     $(this).nextUntil('dt').slideToggle()
  })
 </script>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 20.06.2013, 15:00
Новичок на форуме
Отправить личное сообщение для maincg Посмотреть профиль Найти все сообщения от maincg
 
Регистрация: 20.06.2013
Сообщений: 4

рони, спасибо.
Accordion работает, но главная проблема в том, что если после <dt> идет следующий <dt>, то первый <dt> должен получить class="arrow_right", ну а если идет следующий <dd> после <dt>, то <dt> получает class="arrow_down". Задача, казалось бы, банальная, изменить стрелки, в зависимости от пункта меню (parent/not parent), но пока не получилось решить проблему
Ответить с цитированием
  #7 (permalink)  
Старый 20.06.2013, 15:23
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А может на сервере проставлять классы? Сервак то прекрасно знает какой элемент - родитель, а какой - пуст. Нормальные люди так и поступают вообще-то.
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2013, 16:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

maincg,
добавил
Сообщение от maincg
(parent/not parent)
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">
   dd{
     display: none;
   }
   .arrow_right{
     background-color: #FF3300;
   }
   .arrow_down{
     background-color: #FFFF33;
   }

    </style>
</head>

<body>
  <dl id="left_menu">
  <dt>Item 1</dt>
  <dt>Item 2</dt>
    <dd>SubItem 2.1</dd>
  <dt>Item 3</dt>
    <dd>SubItem 3.1</dd>
  <dt>Item 4</dt>
  <dt>Item 5</dt>
    <dd>SubItem 5.1</dd>
</dl>
 <script>
  $ ("dt").prev("dt").addClass("arrow_right");
  $ ("dd").prev("dt").addClass("arrow_down")
  .click(function (event) {
     $(this).nextUntil('dt').slideToggle()
  })
 </script>
</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 20.06.2013, 16:57
Новичок на форуме
Отправить личное сообщение для maincg Посмотреть профиль Найти все сообщения от maincg
 
Регистрация: 20.06.2013
Сообщений: 4

Спасибо всем за помощь! Отдельная огромная благодарность РОНИ!!! С меня пиво. Жду в ЛС номер кошелька, отправлю на выходных или после них.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
добавление стилей для множества элементов ??? Общие вопросы Javascript 7 14.06.2012 01:50
Некорректная работа get(set)Attribute в IE для элементов img back to back Internet Explorer 15 09.06.2012 16:52
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 14:48