Появление блоков при клике по ссылке, скрытие при повторном клике и смене ссылки + добавлять\убирать класс?

Question

[Annet22]

Ребята есть следующий код html

<nav class="main-mnu">
	<ul>
		<li>
		<a href="#">Ссылка 1<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 1 ссылки
		</div>
		</li>

		<li>
		<a href="#">Ссылка 2<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 2 ссылки
		</div>
		</li>

		<li>
		<a href="#">Ссылка 3<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 3 ссылки
		</div>
		</li>

		<li>
		<a href="#">Ссылка 4<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 4 ссылки
		</div>
		</li>

		<li>
		<a href="#">Ссылка 5<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 5 ссылки
		</div>
		</li>

		<li>
		<a href="#">Ссылка 6<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 6 ссылки
		</div>
		</li>

		<li>
		<a href="#">Ссылка 7<i class="mdi mdi-chevron-down f_right"></i></a>
		<div class="dropdown-block">
			Содержимое для 7 ссылки
		</div>
		</li>
	</ul>
</nav>

Изначально отображается только меню, блоки скрыты. Нужно следующее при клике по ссылке отобразить блок для этой ссылки, при повторном клике по ссылке или клике по другой ссылке открытый блок скрываем и открываем блок уже для другой ссылки. Также при клике вне ссылок и вне открытого блока закрывать открытый блок. Еще нужно дописать для li или для a класс (следует добавлять при клике и убирать при повторном и т.д.) например open или active для последующего закрашивания в css.
Помогите прошу уже второй день мучаюсь.

Answer 1

[Anton Bobylev]

Согласен с Дима Турков , но вот еще вариант: https://jsfiddle.net/45tva8o3/2/

Comments

[Annet22]

а как добавить в вашем примере при повторном клике по ссылке, чтобы скрывался блок и очищался класс active

[Anton Bobylev]

Annet22: https://jsfiddle.net/45tva8o3/4/

[Annet22]

dpigo: Красота! Еще раз спасибо вам.

[Annet22]

Подскажите! Добавилась еще одна ссылка, но без контента и с одной особенностью блок для этой ссылки отличается от остальных. Как ее добавить к вашей рабочей версии кода https://jsfiddle.net/45tva8o3/4/?
Вместо <div class="search-dropdown-block"> можно и так назвать блок, если это проще в реализации <div class="dropdown-block search">
Вот ссылка в Html

<li>
    <a href="#"><i class="mdi mdi-magnify"></i></a>
    <div class="search-dropdown-block">
      Содержимое для 8 ссылки
    </div>
</li>

Заранее благодарю. И прошу прощение, что отнимаю ваше время.

[Annet22]

Вместо иконки (это иконка поиска) в ссылке можете использовать любое изображение например: htmlbook.ru/themes/hb/img/find.png

[Anton Bobylev]

Annet22: Пожалуйста: https://jsfiddle.net/45tva8o3/6/

[Annet22]

Еще раз спасибо вам!

Answer 2

[Дима Паутов]

Через одно место конечно, но задача вообще выглядит как задание для сообщества. Ни вашего кода, что бы проверить что не так и т.п.

Answer 3

[Annet22]

Спасибо ребята. Помогли решить мою задачу.

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

Comments

[Anton Bobylev]

Спасибо. Отметьте правильный ответ, пожалуйста.

[Annet22]

dpigo: Готово.