Javascript.RU

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

Плавное появление блоков при нажатии на один из них на чистом JS
Необходимо сделать, что бы при выборе варианта "Ссылка 1" плавно появлялся "Содержимое для 1 ссылки", а при выборе варианта "Ссылка 2" плавно раскрывался "Содержимое для 2 ссылки", а "Содержимое для 1 ссылки" закрывался и соответственно наоборот и так для всех ссылок. У меня есть решение на Jquery. но мне нужно решение на чистом js без фреймворков.

<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>
<script>var $dropdowns = $('.dropdown-block');
var $anchors = $('.main-mnu a');

function resetMenu() {
  $dropdowns.hide();
  $anchors.removeClass('active');
}

$anchors.on('click',function(e){
  var $link = $(this);

	e.preventDefault();
  resetMenu();

  $link.siblings('.dropdown-block').show();
  $link.addClass('active');
});

$(document).on('click', function(e){
	var $target = $(e.target);
  if(!$target.is($anchors) && !$target.is($dropdowns)) {
  	resetMenu();
  }
});

$dropdowns.hide();</script>
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2020, 16:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,906

markroutedsaa,
попробуйте поискать по форуму, есть сотни примеров того что вы хотите сделать.
Ответить с цитированием
  #3 (permalink)  
Старый 29.07.2020, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,906

markroutedsaa,
https://javascript.ru/forum/misc/798...tml#post521968

https://javascript.ru/forum/dom-wind...tml#post494186

и т. д.
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2020, 16:58
Новичок на форуме
Отправить личное сообщение для markroutedsaa Посмотреть профиль Найти все сообщения от markroutedsaa
 
Регистрация: 29.07.2020
Сообщений: 2

Спасибо, нашел решение
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки кнопки при нажатии и обратно при повторном нажатии mff Общие вопросы Javascript 15 03.05.2018 14:12
Появление блока при нажатии на кнопку nik_neman jQuery 2 02.03.2012 07:06
Плавное появление изображений при загрузке страницы Imdoode jQuery 7 28.06.2011 09:48
Если один уже открыт и при нажатии на ссылку два первый блок скрывался и открывался ybiza Элементы интерфейса 3 16.12.2010 21:24
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 19:18