Javascript-форум - Класс для dt

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Класс для dt (https://javascript.ru/forum/jquery/39205-klass-dlya-dt.html)

Класс для 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();

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

Заранее благодарен

Цитата:

Сообщение от maincg

которые не содержат dd

у вас ни один DT не содержит DD

Цитата:

Сообщение от maincg

dt, которые не содержат dd

может идут следом? в вашем примере структуры нет dt содержащих dd

Да, идут следом, "не содержат" - я не правильно выразился. Прошу прощения! Если бы была вложенность, то children() решил проблему

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>

рони, спасибо.
Accordion работает, но главная проблема в том, что если после <dt> идет следующий <dt>, то первый <dt> должен получить class="arrow_right", ну а если идет следующий <dd> после <dt>, то <dt> получает class="arrow_down". Задача, казалось бы, банальная, изменить стрелки, в зависимости от пункта меню (parent/not parent), но пока не получилось решить проблему

А может на сервере проставлять классы? Сервак то прекрасно знает какой элемент - родитель, а какой - пуст. Нормальные люди так и поступают вообще-то.

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>

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