CSS (селектор действий): цель не работает - PullRequest
Новая
       8

CSS (селектор действий): цель не работает

0 голосов
/ 19 марта 2020 

.accordion-item:target .answer {
  max-height: 20rem;
}
<div class="accordion-item" id="question1">
  <a class="accordion-link" href="#question1">What is COVID-19?
    <ion-icon class="ion" name="add-outline"></ion-icon>
    <ion-icon class="ion" name="remove-outline"></ion-icon>
  </a>
  <div class="answer">
    <p>
      COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
    </p>
  </div>
</div>

Высота класса ответа не увеличивается до 20rem после того, как я щелкаю по этому классу (элемент аккордеона).

1 Ответ

1 голос
/ 19 марта 2020

Одна простая ошибка удалить # из поля id. Поставить id="question1" не id="#question1"

Рабочий пример. 

*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing: inherit;
}

html{
    font-family: 'Roboto',sans-serif;
    font-size: 10px;
    box-sizing: border-box;
}

section{
    width:100%;
    height:100vh;
    background-color: #3c4053;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    width:100%;
    max-width: 80rem;
    margin:0 auto;
    padding:0 1.5rem;
}

.accordion-item{
    background-color: #283042;
    border-radius: .4rem;
    margin-bottom: 1rem;
    padding:1rem;
    box-shadow: 0.5rem 2px 0.5rem rgba(0,0,0,0.1);
}

.accordion-link{
    font-size: 1.6rem;
    color:rgba(255,255,255,0.8);
    text-decoration: none;
    background-color:#283042;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.ion{
    color:#e7d5ff;
    padding:.5rem;
}

.ion[name="remove-outline"]{
    display:none;
}

.answer::before{
    content: "";
    position: absolute;
    width:0.6rem;
    height: 90%;
    background-color:#8fc460;
    top:50%;
    left:0;
    transform: translateY(-50%);
}

.answer p{
    color:rgba(255,255,255,0.6);
    font-size: 1.4rem;
    padding:2rem;
}

.answer {
    max-height: 0;
    overflow: hidden;
    position:relative;
    background-color: #212838;
    transition:max-height 650ms;
}

.accordion-item:target .answer{
    max-height:20rem;
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

.accordion-item:target .ion[name="add-outline"]{
    display:none;
}

.accordion-item:target .ion[name="remove-outline"]{
    display:block;
}
<section>
    <div class="container">
        <div class="accordion">
            <div class="accordion-item" id="question1">
                <a class="accordion-link" href="#question1">
                    What is COVID-19?
                    <ion-icon class="ion" name="add-outline"></ion-icon>
                    <ion-icon class="ion" name="remove-outline"></ion-icon>
                </a>
                <div class="answer">
                    <p>
                        COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
                    </p>
                </div>
            </div>

            <div class="accordion-item" id="question2">
                <a class="accordion-link" href="#question2">
                    What is COVID-19?
                    <ion-icon class="ion" name="add-outline"></ion-icon>
                    <ion-icon class="ion" name="remove-outline"></ion-icon>
                </a>
                <div class="answer">
                    <p>
                        COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
                    </p>
                </div>
            </div>

            <div class="accordion-item" id="question3">
                <a class="accordion-link" href="#question3">
                    What is COVID-19?
                    <ion-icon class="ion" name="add-outline"></ion-icon>
                    <ion-icon class="ion" name="remove-outline"></ion-icon>
                </a>
                <div class="answer">
                    <p>
                        COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Ion Icons -->
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
...