Форум

maincg · #1 (**permalink**) 20.06.2013, 12:39

Добрый день!

Есть следующая структура (меню с эффектом 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();

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

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

devote · #2 (**permalink**) 20.06.2013, 13:00

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

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

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

рони · #3 (**permalink**) 20.06.2013, 13:02

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

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

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

maincg · #4 (**permalink**) 20.06.2013, 13:09

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

рони · #5 (**permalink**) 20.06.2013, 13:12

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>

maincg · #6 (**permalink**) 20.06.2013, 15:00

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

danik.js · #7 (**permalink**) 20.06.2013, 15:23

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

рони · #8 (**permalink**) 20.06.2013, 16:31

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>

maincg · #9 (**permalink**) 20.06.2013, 16:57

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

Форум

Справочник

Discord чат

Курсы javascript