Почему при обращении к классу active, ничего не происходит?
Необходимо из плюса сделать минус при клике. Пытаюсь реализовать с помощью transform: rotate(0deg), для вертикальной палочки, при активном классе, но ничего не получается. В чем ошибка? Может есть другие способы из плюса сделать минус?
<div class="accordion__container"> <div class="accordion__inner"> <ul class="program__accordeon"> <li class="program__box"> <a class="program__link" href="#"> <div class="program__head"> <span>Lesson 1.</span> <p>Aliquet lectus urna viverra in odio.</p> </div> </a> <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote> </li> <li class="program__box"> <a class="program__link " href="#"> <span>Lesson 2.</span> <p>Orci commodo, viverra orci mollis ut euismod.</p> </a> <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote> </li> <li class="program__box"> <a class="program__link" href="#"> <span>Lesson 3.</span> <p>Sagittis vitae facilisi rutrum amet mauris quisque vel.</p> </a> <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote> </li> </ul> </div> </div> |
<div class="accordion__container"> <div class="accordion__inner"> <ul class="program__accordeon"> <li class="program__box"> <a class="program__link" href="#"> <div class="program__head"> <span>Lesson 1.</span> <p>Aliquet lectus urna viverra in odio.</p> </div> </a> <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote> </li> <li class="program__box"> <a class="program__link " href="#"> <span>Lesson 2.</span> <p>Orci commodo, viverra orci mollis ut euismod.</p> </a> <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote> </li> <li class="program__box"> <a class="program__link" href="#"> <span>Lesson 3.</span> <p>Sagittis vitae facilisi rutrum amet mauris quisque vel.</p> </a> <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote> </li> </ul> </div> </div>
.accordion__container{ width: 1230px; margin: 0 auto; } .program__accordeon{ margin: 60px } .program__box{ position: relative; } .program__link{ display: block; margin-bottom: 10px; } .program__link::before, .program__link::after{ content: ''; position: absolute; top: 30%; left: -7%; right: 0; bottom: 0; background-color: rgb(255, 63, 58); border-radius: 2px; width: 20px; height: 2px; } .program__link::after{ transform: rotate(90deg); } .program__link .active ::after{ transform: rotate(0deg); } .program__link span{ font-weight: 400; font-size: 20px; letter-spacing: 0; color: rgb(255, 63, 58); margin-right: 8px; } .program__link p{ font-weight: 700; font-size: 20px; letter-spacing: 0; color: rgb(30, 33, 44); } .box{ font-weight: 400; letter-spacing: 0; color: rgb(66, 69, 81); display: none; } .accordion__container{ width: 1230px; margin: 0 auto; } .program__accordeon{ margin: 60px } |
.accordion__container{ width: 1230px; margin: 0 auto; } .program__accordeon{ margin: 60px } .program__box{ position: relative; } .program__link{ display: block; margin-bottom: 10px; } .program__link::before, .program__link::after{ content: ''; position: absolute; top: 30%; left: -7%; right: 0; bottom: 0; background-color: rgb(255, 63, 58); border-radius: 2px; width: 20px; height: 2px; } .program__link::after{ transform: rotate(90deg); } .program__link .active ::after{ transform: rotate(0deg); } .program__link span{ font-weight: 400; font-size: 20px; letter-spacing: 0; color: rgb(255, 63, 58); margin-right: 8px; } .program__link p{ font-weight: 700; font-size: 20px; letter-spacing: 0; color: rgb(30, 33, 44); } .box{ font-weight: 400; letter-spacing: 0; color: rgb(66, 69, 81); display: none; } .accordion__container{ width: 1230px; margin: 0 auto; } .program__accordeon{ margin: 60px }
$(document).ready(function(){ $('.program__link').on("click", function(){ $(this).next('.box').slideToggle(); $(this).toggleClass('active'); }); }) |
$(document).ready(function(){ $('.program__link').on("click", function(){ $(this).next('.box').slideToggle(); $(this).toggleClass('active'); }); })
Дополнительно:
проблема в том что внутри .program__link , нет элемента с классом .active
и там ещё опечатка где между классом и after
.program__link .active ::after
оставь просто .active::after в css
- Большое спасибо)
- Patris546, просто эта запись .program__link .active - так ты обращаешься к элементу с классом .active который находиться внутри .program__link, ну думаю ты понял)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если вы обращаетесь к классу "active" и ничего не происходит, возможно проблема кроется в том, что ваш CSS код не правильно определяет стили для этого класса. Вот несколько шагов, которые могут помочь вам решить эту проблему:
1. Проверьте, что у вас правильно определен класс в HTML коде. Например, вы должны использовать класс="active" внутри тега
2. Убедитесь, что у вас есть соответствующие стили для класса "active" в вашем CSS файле. Например, вы можете использовать следующий код для определения стилей для этого класса:
.active { color: red; font-weight: bold; }
3. Проверьте, что ваш HTML элемент действительно имеет класс "active" в момент загрузки страницы. Если класс добавляется динамически с помощью JavaScript, убедитесь, что функция добавления класса работает правильно.
4. Проверьте консоль браузера на наличие ошибок JavaScript. Возможно, есть какие-то ошибки, которые могут помешать корректной работе скриптов на странице.
Если после выполнения этих шагов проблема остается, попробуйте предоставить больше информации о вашем коде (HTML, CSS, JavaScript) для того, чтобы мы могли более точно определить, в чем может быть причина проблемы.