Задать вопрос
@levyndra
верстка

Как сделать осуществление поворота условной стрелки при нажатии?

Как сделать так, чтобы при нажатии на пункт в меню стрелка поворачивалась вниз, а при повторном нажатии становилась в исходное положение. И сделать это как-нибудь так, чтобы, если у меня несколько стрелок в меню, они не поворачивались все одновременно, а каждая отдельно.
5bce1e730aea1246441608.jpeg
<!DOCTYPE html>
<html lang="ru">

<head>

	<meta charset="utf-8">

	<title>Детские игрушки</title>
	<meta name="description" content="">

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
	<style>body { opacity: 0; overflow-x: hidden;} html { background-color: #fff; }</style>

</head>
<header class="main-header flex">
	<nav class="main-menu flex">
		<div class="logo">
			<a href="index.html"><img src="img/logo.png" alt="logo" class="img-responsive"></a>
		</div>
		<div class="search-box">
			<form class="flex search">
				<input type="text" placeholder="Поиск по товарам..."> 
				<button type="submit">Найти</button>
			</form>
		</div>
		<div class="phones flex">
			<a href="tel:+375296628732">+375 (29) 153 64 60</a>
			<a href="tel:+375296628732">+375 (44) 153 70 60</a>
		</div>
		<div class="apll-btn">
			<a href="#" class="make-order">Сделать заказ</a>
		</div>
	</nav>
</header>

<section class="slider-ad">
	<div class="container">
		<div class="slide"><img src="img/slide_1.jpg" alt=""></div>
		<div class="slide"><img src="img/slide_2.jpg" alt=""></div>
		<div class="slide"><img src="img/slide_3.jpg" alt=""></div>
	</div>
</section>

<nav class="menu-container flex">
	<div class="middle-menu flex">
		<a href="#">Новое</a>
		<a href="#">Популярное</a>
		<a href="#">Категории</a>
		<a href="#">Статьи</a>
		<a href="#">Контакты</a>
		<a href="#">О нас</a>
	</div>
</nav>

<article class="mass-info flex">
	<nav class="left-menu">
		<ul id="menu">
			<li><span>Конструкторы<i class="fa fa-angle-right left-menu-arrow" aria-hidden="true"></i></span>
				<ul>
					<li><a href="#">Игровые конструкторы для девочек</a></li>
					<li><a href="#">Игровые конструкторы для мальчиков</a></li>
					<li><a href="#">Конструктор "Долони"</a></li>
					<li><a href="#">Конструктор шестеренки</a></li>
				</ul>
			</li>
			<li>
				<span>Мягкие игрушки</span>
			</li>
			<li><span>Погремушки</span>
				<ul>
					<li><a href="">подпункт 1</a></li>
					<li><a href="">подпункт 2</a></li>
					<li><a href="">подпункт 3</a></li>
				</ul>
			</li>
			<li><span>Погремушки</span>
				<ul>
					<li><a href="">подпункт 1</a></li>
					<li><a href="">подпункт 2</a></li>
					<li><a href="">подпункт 3</a></li>
				</ul>
			</li>
			<li><span>Погремушки</span>
				<ul>
					<li><a href="">подпункт 1</a></li>
					<li><a href="">подпункт 2</a></li>
					<li><a href="">подпункт 3</a></li>
				</ul>
			</li>
			<li>
				<span>Мягкие игрушки</span>
			</li>
			<li>
				<span>Мягкие игрушки</span>
			</li>
			<li>
				<span>Мягкие игрушки</span>
			</li>
			<li><span>Погремушки</span>
				<ul>
					<li><a href="">подпункт 1</a></li>
					<li><a href="">подпункт 2</a></li>
					<li><a href="">подпункт 3</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	<div class="catalog flex">
		<div class="toy flex">
			<div class="border-img"><a href="#"><img src="img/igr_1.jpg" alt="" class="img-responsive"></a></div>
			<div class="title-toy">
				<h1>VTECH "Поймай меня, Кошка!"</h1>
			</div>
			<p><span>25</span> бел. руб.</p>
			<a href="#" class="buy">Купить</a>
		</div>
		<div class="toy flex">
			<div class="border-img"><a href="#"><img src="img/igr_2.jpg" alt="" class="img-responsive"></a></div>
			<div class="title-toy">
				<h1>BAZZ игрушка «Веселый щенок»</h1>
			</div>
			<p><span>34</span> бел. руб.</p>
			<a href="#" class="buy">Купить</a>
		</div>
		<div class="toy flex">
			<div class="border-img"><a href="#"><img src="img/igr_3.jpg" alt="" class="img-responsive"></a></div>
			<div class="title-toy">
				<h1>Мягкая игрушка Chicco Мишка</h1>
			</div>
			<p><span>14</span> бел. руб.</p>
			<a href="#" class="buy">Купить</a>
		</div>
		<div class="toy flex">
			<div class="border-img"><a href="#"><img src="img/igr_4.jpg" alt="" class="img-responsive"></a></div>
			<div class="title-toy">
				<h1>Интеллектуальная башенка</h1>
			</div>
			<p><span>50</span> бел. руб.</p>
			<a href="#" class="buy">Купить</a>
		</div>
		<div class="toy flex">
			<div class="border-img"><a href="#"><img src="img/igr_5.jpg" alt="" class="img-responsive"></a></div>
			<div class="title-toy">
				<h1>Развивающая игрушка «Гибкий шарик»</h1>
			</div>
			<p><span>70</span> бел. руб.</p>
			<a href="#" class="buy">Купить</a>
		</div>
		<div class="toy flex">
			<div class="border-img"><a href="#"><img src="img/igr_6.jpg" alt="" class="img-responsive"></a></div>
			<div class="title-toy">
				<h1>Мяч детский резиновый цветной</h1>
			</div>
			<p><span>23</span> бел. руб.</p>
			<a href="#" class="buy">Купить</a>
		</div>
	</div>
</article>

<div class="partners-container">
	<div class="partners flex">
		<a href="#"><img src="img/playdoh.png" alt="" width="110px"></a>
		<a href="#"><img src="img/ymka.png" alt="" width="80px"></a>
		<a href="#"><img src="img/mylittlepony.png" alt="" width="80px"></a>
		<a href="#"><img src="img/fisherprice.png" alt="" width="100px"></a>
		<a href="#"><img src="img/lego.png" alt="" width="60px"></a>
	</div>
</div>

<footer class="footer flex">
	<div class="contacts flex">
		<div class="info flex">
			<h2>Контакты</h2>
			<a href="tel:+375296628732">+375 (29) 153 64 60</a>
			<a href="tel:+375296628732">+375 (44) 153 70 60</a>
			<p>улица Лобанка, 14<br>Минск, Беларусь</p>
			<h3>Время работы</h3>
			<h4>ПН-ПТ: с 11:00 до 21:00<br>СБ: с 11:00 до 21:00<br>ВС: выходной</h4>
		</div>
		<div class="social-links flex">
			<a href="#"><img src="img/vk.png" alt="" width="38px"></a>
			<a href="#"><img src="img/google+.png" alt="" width="38px"></a>
			<a href="#"><img src="img/mail.png" alt="" width="38px"></a>
			<a href="#"><img src="img/rss.png" alt="" width="38px"></a>
		</div>
	</div>
	<div class="articles">
		<h2>Статьи</h2>
		<a href="index.html" class="arrow_top"></a>
		<div class="articles-container flex">
			<div class="article-block">
				<div class="border-img"><a href="#"><img src="img/1-article.jpg" alt="" class="img-responsive"></a></div>
				<h3>Как выбрать нужную и полезную игрушку для ребенка?</h3>
				<p>Во все времена взрослые выбирают и покупают детям игрушки. Они были и остаются самым рейтинговым товаром. На первый взгляд, нынешнее...</p>
				<a href="#">Читать</a>
			</div>
			<div class="article-block">
				<div class="border-img"><a href="#"><img src="img/2-article.jpg" alt="" class="img-responsive"></a></div>
				<h3>Что делать, если ребенок боится темноты, врачей и собак?</h3>
				<p>Во все времена взрослые выбирают и покупают детям игрушки. Они были и остаются самым рейтинговым товаром. На первый взгляд, нынешнее...</p>
				<a href="#">Читать</a>
			</div>
		</div>
	</div>
</footer>

<div class="copyright flex">
	<p>© 2016 Copyright Text</p>
</div>
<body>

	<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
	<script src="js/scripts.min.js"></script>
</body>
</html>
  • Вопрос задан
  • 264 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@ncheremisin
Принимаю заказы на Битрикс
Событие click на пункт элемента, внутрь добавление класса к этому элементу $(this).addClass, а на класс повесить css transform: rotate и transition: .3s;
Ответ написан
Комментировать
Комментировать
@itninja
Как-то так: https://codepen.io/anon/pen/gBBQzL
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
10000 руб./за проект
Ещё заказы