Форум

Mrjoey · #1 (**permalink**) 26.09.2013, 12:15

День добрый!

Разбираюсь с jquery. Буду рад, если подскажите.

Например, имеем два блока А и B.

Простой пример, имеется аккордеон (в нем два блока А и B), открывается блок (А) по нажатию.

При клике на другой (B), (B) открывается, а предыдущий (A) сворачивается.

Т.е. всегда открыт только один блок. А должно открываться неограниченное число.

Вот всю голову сломал, как не удалять класс открытому при клике на другой, а закрывать только при втором клике на открытый блок.

Буду признателен за помощь.

$(function() {
		$('.accordeon-content').not('.active').hide();

		$('.accordeon-caption').click(function() {
			$('.accordeon-content').not($(this).next('.accordeon-content')).removeClass('active').slideUp(600);
			$(this).next('.accordeon-content').addClass('active').slideDown(600);
		})
	})

рони · #2 (**permalink**) 26.09.2013, 13:19

Mrjoey,
а html где?

$(function() {
		$('.accordeon-content').not('.active').hide();
		$('.accordeon-caption').click(function() {
			$(this).next('.accordeon-content').toggleClass('active').slideToggle(600);
		})
	})

Mrjoey · #3 (**permalink**) 26.09.2013, 13:31

Спасибо за ответ. Пробовал Ваш код, не выходит что-то каменный цветок(

<dl class="accordeon">
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content active">
123
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
567
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
890
  </dd>
</dl>

рони · #4 (**permalink**) 26.09.2013, 14:08

Mrjoey,
и что не так ?

<!DOCTYPE HTML>

<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <script>
    $(function() {
		$('.accordeon-content').not(':first').hide();
                           $('.accordeon-content:first').addClass('active')
		$('.accordeon-caption').click(function() {
			$(this).next('.accordeon-content').toggleClass('active').slideToggle(600);
		})
	})

</script>
</head>

<body>

 <dl class="accordeon">
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
123
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
567
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
890
  </dd>
</dl>

</body>

</html>

Mrjoey · #5 (**permalink**) 26.09.2013, 14:16

спасибо преогромное! выручили!

А можно ещё спросить, что Вы бы лично посоветовали почитать, чтобы разбираться в jquery?

рони · #6 (**permalink**) 26.09.2013, 14:48

Mrjoey,
http://jquery.page2page.ru/

Mrjoey · #7 (**permalink**) 26.09.2013, 15:25

Можно ещё один вопрос?

Можно как то для первого блока, по умолчанию сразу назначать класс active?

<dt class="accordeon-caption">Заголовок</dt>
      <dd class="accordeon-content">
         123
      </dd>

чтобы было вот так:

<dl class="accordeon">
	  <dt class="accordeon-caption">Заголовок</dt>
	  <dd class="accordeon-content active">
	123
	  </dd>
	  <dt class="accordeon-caption">Заголовок</dt>
	  <dd class="accordeon-content">
	567
	  </dd>
	  <dt class="accordeon-caption">Заголовок</dt>
	  <dd class="accordeon-content">
	890
	  </dd>
	</dl>

рони · #8 (**permalink**) 26.09.2013, 15:39

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

Можно как то для первого блока, по умолчанию сразу назначать класс active?

смотрите код выше 4 пост

Mrjoey · #9 (**permalink**) 26.09.2013, 15:47

Благодарю!) ларчик просто открывался.

А я полез в справочник, на который вы ссылку скинули, стали пробовать, получилось примерно так:
$('.show-layered dd.accordeon-content:first').css('display', 'block');

задумка хоть и верна по-моему, но там по умолчанию дописывается display: none;

Надо было не свойство, а класс присваивать, верно?

Форум

Справочник

Discord чат

Курсы javascript