Класс вешается не на тот элемент
Мой html код:
document.querySelector(".instruction").addEventListener("click", function(object) {
const plus = object.target.closest('.decription-open');
const description = $('.instruction-decription')
if (plus) {
plus.classList.toggle('decription-open-true');
if(description.classList = plus.classList){
description.classList.toggle('decription-true');
}
}
})
/**/
.about-service {
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #3F80FF;
}
.about-service-content {
width: 1400px;
padding-right: 30px;
padding-left: 30px;
justify-content: space-between;
align-items: start;
display: flex;
}
.about-service-content .basic-left h1 {
width: 475px;
font-family: AcherusFeral;
font-style: normal;
font-weight: 700;
font-size: 65px;
color: #FFFFFF;
}
.about-service-content .basic-left p {
margin-top: 20px;
width: 450px;
font-family: Inter;
font-style: normal;
font-weight: 400;
font-size: 20px;
color: #FFFFFF;
}
.about-service-content .basic-left button {
margin-top: 20px;
padding-left: 70px !important;
padding-right: 70px !important;
padding: 18px;
cursor: pointer;
background: #EE9D23;
font-family: AcherusFeral;
font-style: normal;
font-weight: 400;
font-size: 25px;
color: #FFFFFF;
border: 0;
border-radius: 10px;
}
.about-service-content .basic-right .instruction {
list-style-type: none;
}
.about-service-content .basic-right .instruction h1 {
font-family: AcherusFeral;
font-style: normal;
font-weight: 400;
font-size: 30px;
color: #FFFFFF;
}
.about-service-content .basic-right .instruction h1:nth-child(2) {
margin-left: 10px;
width: 400px;
}
.about-service-content .basic-right .instruction li span {
align-items: start;
justify-content: end;
display: flex;
}
.about-service-content .basic-right .instruction li span:nth-child(2) {
display: none;
}
.decription-true {
width: max-content;
margin-left: auto;
margin-right: 30px;
display: flex !important;
}
.about-service-content .basic-right .instruction li span a{
transition: 0.2s;
cursor: pointer;
height: 30px;
position: relative;
margin-top: auto;
margin-bottom: auto;
}
.about-service-content .basic-right .instruction li span p{
width: 400px;
margin-top: 10px;
font-family: Inter;
font-style: normal;
font-weight: 400;
font-size: 20px;
color: #FFFFFF;
}
.about-service-content .basic-right .instruction li {
transition: 0.2s;
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #FFF;
}
.about-service-content .basic-right .instruction li:first-child {
margin-top: 0px;
}
.decription-open-true {
rotate: 135deg;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="about-service">
<div class="about-service-content">
<div class="basic-left">
<h1>Как работает сервис?</h1>
<p>Легко, максимально прост и удобен в использование!</p>
<button>Мои заметки</button>
</div>
<div class="basic-right">
<ul class="instruction">
<li>
<span>
<h1>1.</h1>
<h1>Войдите в аккаунт или создайте его</h1>
<a class="decription-open decription-one">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
</svg>
</a>
</span>
<span class="instruction-decription decription-one">
<p>Чтобы воспользоваться сервисом Вам нужно зарегистрировать аккаунт, если у вас его еще нет.</p>
</span>
</li>
<li>
<span>
<h1>2.</h1>
<h1>Перейдите в раздел с заметками</h1>
<a class="decription-open decription-two">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
</svg>
</a>
</span>
<span class="instruction-decription decription-two">
<p>Войдите в личный кабинет и нажмите на кнопку "Мои заметки"</p>
</span>
</li>
<li>
<span>
<h1>3.</h1>
<h1>Отредактируйте заметку если потребуется</h1>
<a class="decription-open decription-three">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
</svg>
</a>
</span>
<span class="instruction-decription decription-three">
<p>С каждой созданной заметкой можно работать отдельно, изменяйте ее или выделяйте среди остальных!</p>
</span>
</li>
</ul>
</div>
</div>
</div>
Проблема в том что класс который должен вешаться на span с классом 'instruction-decription' Вешается на гиперссылку
Ответы (1 шт):
Автор решения: ksa
→ Ссылка
Проблема в том что класс который должен вешаться на span с классом 'instruction-decription' Вешается на гиперссылку
Такой эффект хотел получить? Чтобы текст показывался и скрывался?
document.querySelector(".instruction").addEventListener("click", function(object) {
const plus = object.target.closest('.decription-open');
if (!plus) return
const description = plus.closest('li').querySelector('.instruction-decription')
plus.classList.toggle('decription-open-true');
description.classList.toggle('decription-true');
})
/**/
.about-service {
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #3F80FF;
}
.about-service-content {
width: 1400px;
padding-right: 30px;
padding-left: 30px;
justify-content: space-between;
align-items: start;
display: flex;
}
.about-service-content .basic-left h1 {
width: 475px;
font-family: AcherusFeral;
font-style: normal;
font-weight: 700;
font-size: 65px;
color: #FFFFFF;
}
.about-service-content .basic-left p {
margin-top: 20px;
width: 450px;
font-family: Inter;
font-style: normal;
font-weight: 400;
font-size: 20px;
color: #FFFFFF;
}
.about-service-content .basic-left button {
margin-top: 20px;
padding-left: 70px !important;
padding-right: 70px !important;
padding: 18px;
cursor: pointer;
background: #EE9D23;
font-family: AcherusFeral;
font-style: normal;
font-weight: 400;
font-size: 25px;
color: #FFFFFF;
border: 0;
border-radius: 10px;
}
.about-service-content .basic-right .instruction {
list-style-type: none;
}
.about-service-content .basic-right .instruction h1 {
font-family: AcherusFeral;
font-style: normal;
font-weight: 400;
font-size: 30px;
color: #FFFFFF;
}
.about-service-content .basic-right .instruction h1:nth-child(2) {
margin-left: 10px;
width: 400px;
}
.about-service-content .basic-right .instruction li span {
align-items: start;
justify-content: end;
display: flex;
}
.about-service-content .basic-right .instruction li span:nth-child(2) {
display: none;
}
.decription-true {
width: max-content;
margin-left: auto;
margin-right: 30px;
display: flex !important;
}
.about-service-content .basic-right .instruction li span a {
transition: 0.2s;
cursor: pointer;
height: 30px;
position: relative;
margin-top: auto;
margin-bottom: auto;
}
.about-service-content .basic-right .instruction li span p {
width: 400px;
margin-top: 10px;
font-family: Inter;
font-style: normal;
font-weight: 400;
font-size: 20px;
color: #FFFFFF;
}
.about-service-content .basic-right .instruction li {
transition: 0.2s;
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #FFF;
}
.about-service-content .basic-right .instruction li:first-child {
margin-top: 0px;
}
.decription-open-true {
rotate: 135deg;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="about-service">
<div class="about-service-content">
<div class="basic-left">
<h1>Как работает сервис?</h1>
<p>Легко, максимально прост и удобен в использование!</p>
<button>Мои заметки</button>
</div>
<div class="basic-right">
<ul class="instruction">
<li>
<span>
<h1>1.</h1>
<h1>Войдите в аккаунт или создайте его</h1>
<a class="decription-open decription-one">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
</svg>
</a>
</span>
<span class="instruction-decription decription-one">
<p>Чтобы воспользоваться сервисом Вам нужно зарегистрировать аккаунт, если у вас его еще нет.</p>
</span>
</li>
<li>
<span>
<h1>2.</h1>
<h1>Перейдите в раздел с заметками</h1>
<a class="decription-open decription-two">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
</svg>
</a>
</span>
<span class="instruction-decription decription-two">
<p>Войдите в личный кабинет и нажмите на кнопку "Мои заметки"</p>
</span>
</li>
<li>
<span>
<h1>3.</h1>
<h1>Отредактируйте заметку если потребуется</h1>
<a class="decription-open decription-three">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
</svg>
</a>
</span>
<span class="instruction-decription decription-three">
<p>С каждой созданной заметкой можно работать отдельно, изменяйте ее или выделяйте среди остальных!</p>
</span>
</li>
</ul>
</div>
</div>
</div>