Как добавить переход css в выпадающий список? - PullRequest
Новая
       1

Как добавить переход css в выпадающий список?

0 голосов
/ 10 июля 2020

У меня есть раскрывающийся список или аккордеон, я просто хочу добавить переход css, поэтому после щелчка он показывает медленный эффект, но, похоже, это не работает, я пытался везде добавить: transition: all 0.2s ;

У меня есть эти тексты: Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.

Как на самом деле работает переход? обычно я пытаюсь добавить его в родительский класс. 

const clickButton = document.querySelectorAll(".accordion");
clickButton.forEach(function (test) {
    const accordionHeader = test.querySelector(".accordion-header");
    accordionHeader.addEventListener("click", function () {
        test.classList.toggle('accordion-is-open')
    })
})
.accordion-wrapper {
    position: relative;
}
.accordion {
margin: auto;
    border-bottom: 1px solid #D4D9DD;
}
.accordion.accordion-is-open .accordion-content {
    display: inline-block;
}
.plus {
    display: block;
    cursor: pointer;
    color: #008CFD;
    font-size: 30px;
}
.minus {
    display: none;
    cursor: pointer;
    color: #008CFD;
    width: 20px;
    font-size: 50px;
}
.accordion.accordion-is-open .plus {
    display: none;
}
.accordion.accordion-is-open .minus {
    display: block;
}
.accordion-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accordion-header p{
    font-size: 18px;
}
.side-line {
    background-color: #000;
    width: 20px;
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 20px 0 0 20px;
    opacity: 0.5;
}
.hideCheeseContent {
    display: none;
}
.accordion-content {
    padding: 0 0 20px 0;
    display: none;
}
.hide {
    display: none;
}
<div class="accordion-wrapper">
            <div class="accordion accordion-is-open">
                <div class="accordion-header">
                    <p>Title</p>
                    <span class="plus">+</span>
                    <span class="minus">-</span>
                </div>
                <div class="accordion-content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
            <div class="accordion">
                <div class="accordion-header">
                    <p>Title</p>
                    <span class="plus">+</span>
                    <span class="minus">-</span>
                </div>
                <div class="accordion-content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
        </div>

1 Ответ

0 голосов
/ 10 июля 2020

Вы можете сделать это с помощью jQuery slideToggle(). Я установил уникальные идентификаторы для каждого блока содержимого, который вам нужно отобразить, а затем добавил eventListeners в каждый из div класса «accordian».

Ссылка на дополнительную информацию на slideToggle () ---------> https://api.jquery.com/slidetoggle/

Пример кода ниже 

<!DOCTYPE html>
<html>
<head>
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Test</title>
    <style type="text/css">
         .accordion-wrapper {
        position: relative;
    }
    .accordion {
    margin: auto;
        border-bottom: 1px solid #D4D9DD;
    }
    .accordion.accordion-is-open .accordion-content {
        display: inline-block;
        transition: 0.5s;
    }
    .plus {
        display: block;
        cursor: pointer;
        color: #008CFD;
        font-size: 30px;
    }
    .minus {
        display: none;
        cursor: pointer;
        color: #008CFD;
        width: 20px;
        font-size: 50px;
    }
    .accordion.accordion-is-open .plus {
        display: none;
    }
    .accordion.accordion-is-open .minus {
        display: block;
    }
    .accordion-header {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .accordion-header p{
        font-size: 18px;
    }
    .side-line {
        background-color: #000;
        width: 20px;
        position: absolute;
        top: 0;
        height: 100%;
        border-radius: 20px 0 0 20px;
        opacity: 0.5;
    }
    .hideCheeseContent {
        display: none;
    }
    .accordion-content {
        padding: 0 0 20px 0;
        display: none;
    }
    .hide {
        display: none;
    }
    </style>
</head>
<body>

    <div class="accordion-wrapper">
                <div class="accordion">
                    <div class="accordion-header">
                        <p>Title</p>
                        <span class="plus">+</span>
                        <span class="minus">-</span>
                    </div>
                    <div class="accordion-content" id="content1">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
                <div class="accordion">
                    <div class="accordion-header">
                        <p>Title</p>
                        <span class="plus">+</span>
                        <span class="minus">-</span>
                    </div>
                    <div class="accordion-content" id="content2">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
            </div>

</body>
<script type="text/javascript">
     document.querySelectorAll('.accordion')[0].addEventListener('click', ()=>{
        $('#content1').slideToggle();
     });
      document.querySelectorAll('.accordion')[1].addEventListener('click', ()=>{
        $('#content2').slideToggle();
     });
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...