dsherbakov
@dsherbakov
Студент

Как анимировать галочку в выпадающем списке?

Добрый день, передо мной встала задача создать анимированный выпадающий список. Я взял это решение на jQuery. Но мне необходимо создать анимацию крутящейся стрелки при открывании списка5b447e2424191257714536.png
Это то, как мне нужно сделать список.
5b447e6134e4a723290281.png
Это то, какой сейчас список у меня. Помогите пожалуйста добавить и анимировать стрелку
Вот что я пока что использовал
$(document).ready(function () {
    $('#list > li').click(function (event) {
        $(this).children("ul").slideToggle();
        event.stopPropagation();
    });
});

<div class="question_list">
				<ul id="list">
					<h2 class="question_title">
						Ответы на часто задаваемые вопросы
					</h2>
				    <li class="question_question">"Как понять, когда зуб надо уже удалять, и когда еще можно лечить?"
				        <ul>
				            <li class="question_answer">Такое серьезное хирургическое вмешательство, как удаление зуба, происходит только в крайних случаях. Существуют абсолютные показания к удалению – так называемые “три О”. Первое – это острый периодонтит. Второе – отломанная коронковая часть зуба. И третье – остомиелит челюсти. Также зубы удаляют в том случае, если они неправильно ил слишком поздно прорезались и травмируют ротовую полость.</li>
				        </ul>
				    </li>
				    <li class="question_question">"Можно ли вылечить кисту в корне зуба?"
				        <ul>
				            <li class="question_answer">Да, зубы под наркозом лечат. Можно. Раньше зубы с большими изменениями в костной ткани однозначно были обречены на удаление. Имеются в виду такие изменения в области верхушек корней, как кисты и гранулемы. В наши дни качественная стоматология справляется с лечением и сохранением таких зубов.</li>
				        </ul>
				    </li>
				    <li class="question_question">"Обязательно ли пользоваться нитью для чистки зубов?"
				        <ul>
				            <li class="question_answer">При чистке зубной нитью вы удаляете зубной налет и частички пищи в таких участках полости рта, куда зубной щетке не добраться между зубами и под пришеечной частью десны и между зубами. Да, пользоваться зубной нитью обязательно, и рекомендуется делать это каждый день. Иначе скопления зубного налета могут вызвать кариес, болезнь десен.</li>
				        </ul>
				    </li>
				    <li class="question_question">"Что делать, если произошла травма зуба?"
				        <ul>
				            <li class="question_answer">Видов травм бывает много, даже в случае сломанного зуба встает вопрос, какая часть была сломана: коронковая часть или корень. Мог произойти не перелом, а подвывих. Или, может быть, вас беспокоит подвижность зуба (он шатается). В любом случае надо прийти на прием к лучшим стоматологам нашей клиники. Мы сделаем все, чтобы сохранить корень и зуб в целом. Если поврежденную часть нельзя восстановить, мы окажем хирургическую помощь.</li>
				        </ul>
				    </li>
				</ul>
			</div>

li{
	 list-style-type: none;
}
ul{
	padding: 0;
}
#list {
}
#list > li {
}
#list > li > ul {
    display: none;
}
#list{
	width: 100%;
}
.question_question {
	background-image: url(img/open.png);
    font-family: "PFAgoraSansPro-Light";
    font-size: 1.5vw;
    background: white;
    border-radius: 2vw;
    width: 57vw;
    text-align: center;
    margin-bottom: 2vw;
    box-shadow: 0vw 0vw 1.3vw 0.1vw #c0bebe;
    padding-top: 0.7vw;
    padding-bottom: 0.7vw;
    cursor: pointer;
    margin-left: 8vw;
    margin-right: 8vw;
}
.question_question:hover{
	color: white;
	background: #21cff2;
}
.question_answer {
    font-family: "PFAgoraSansPro-Regular";
    font-size: 1.2vw;
    padding: 1vw 1vw;
}
.question_list{
	padding-bottom: 2vw;
	padding-top: 1vw;
}
  • Вопрос задан
  • 1499 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Добавляете стрелку
<div class="question_list">
        <ul id="list">
          <h2 class="question_title">
            Ответы на часто задаваемые вопросы
          </h2>
            <li class="question_question">"Как понять, когда зуб надо уже удалять, и когда еще можно лечить?"
                 <span class="arrow"></span>
                <ul>
                    <li class="question_answer">Такое серьезное хирургическое вмешательство, как удаление зуба, происходит только в крайних случаях. Существуют абсолютные показания к удалению – так называемые “три О”. Первое – это острый периодонтит. Второе – отломанная коронковая часть зуба. И третье – остомиелит челюсти. Также зубы удаляют в том случае, если они неправильно ил слишком поздно прорезались и травмируют ротовую полость.</li>
                </ul>
            </li>
            <li class="question_question">"Можно ли вылечить кисту в корне зуба?"
                <span class="arrow"></span>
                <ul>
                    <li class="question_answer">Да, зубы под наркозом лечат. Можно. Раньше зубы с большими изменениями в костной ткани однозначно были обречены на удаление. Имеются в виду такие изменения в области верхушек корней, как кисты и гранулемы. В наши дни качественная стоматология справляется с лечением и сохранением таких зубов.</li>
                </ul>
            </li>
            <li class="question_question">"Обязательно ли пользоваться нитью для чистки зубов?"
                 <span class="arrow"></span>
                <ul>
                    <li class="question_answer">При чистке зубной нитью вы удаляете зубной налет и частички пищи в таких участках полости рта, куда зубной щетке не добраться между зубами и под пришеечной частью десны и между зубами. Да, пользоваться зубной нитью обязательно, и рекомендуется делать это каждый день. Иначе скопления зубного налета могут вызвать кариес, болезнь десен.</li>
                </ul>
            </li>
            <li class="question_question">"Что делать, если произошла травма зуба?"
                <span class="arrow"></span>
                <ul>
                    <li class="question_answer">Видов травм бывает много, даже в случае сломанного зуба встает вопрос, какая часть была сломана: коронковая часть или корень. Мог произойти не перелом, а подвывих. Или, может быть, вас беспокоит подвижность зуба (он шатается). В любом случае надо прийти на прием к лучшим стоматологам нашей клиники. Мы сделаем все, чтобы сохранить корень и зуб в целом. Если поврежденную часть нельзя восстановить, мы окажем хирургическую помощь.</li>
                </ul>
            </li>
        </ul>
      </div>

в js пишите
$(document).ready(function () {
    $('#list > li').click(function (event) {
        $(this).find('.arrow').toggleClass('active');
        $(this).children("ul").slideToggle();
        event.stopPropagation();
    });
});

В стилях
.arrow {
transition: transform 1s;
}
.arrow.active {
transform: rotate(90deg);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
nor1m
@nor1m
web-developer
$(document).ready(function () {
    $('#list > li').click(function (event) {
        $(this).children("ul").slideToggle();
        event.stopPropagation();
         $(this).children("ul").children("li").children("i").addClass('active');
    });
});


.active{
transition: 1s;
transform: rotate(90deg);
}


Html и css сами додумайте
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы