CSS только аккордеон с вводом - появляются скрытые гиперссылки - PullRequest
Новая
       6

CSS только аккордеон с вводом - появляются скрытые гиперссылки

0 голосов
/ 13 февраля 2020

Я собрал CSS только аккордеон ... (И меня специально попросили построить это без JavaScript).

Пока мой код работает нормально. И я использую <input type="checkbox" checked="checked" /> для достижения этой цели.

Проблема, с которой я сталкиваюсь, заключается в том, что содержимое, которое я скрываю / переключаю, включает гиперссылки. И когда мой аккордеон закрыт, гиперссылки по-прежнему кликабельны, даже если аккордеон закрыт.

IE - если вам нужно было навести 40px-50px под копией «Выберите другой интересный пункт назначения», вы можете не вижу содержания. Но вы все еще можете навести курсор на (невидимые) гиперссылки. И даже нажмите на них.

Как я могу предотвратить это?

Я не хочу, чтобы мои гиперссылки были кликабельными. Только когда аккордеон открыт!

Вот кодовый блок, где вы можете увидеть это: https://codepen.io/ReenaVerma1981/pen/qBdbbWJ

ul {
    list-style: none;
    padding: 0px;

}

.readme {
    background-color: transparent;
    color: #ff6600;
    font-family: "easyjet_rounded_demi",Arial,Helvetica,sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    padding: 0;
    border: 0;
}

.accordion {
    margin: 0 auto;
    width: 100%;
}

.accordion__item {
    float: left;
    position: relative;
    width: 100%;
    background-color: transparent;
    border-radius: 4px;
    margin-bottom: 40px;
}

.accordion__item span {
    color: #ff6600;
    margin-top: 1rem;
    position: absolute;
    left: 280px;
    top: 0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.accordion__item input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 50px;
    z-index: 1;
    opacity: 0;
}
.accordion__item input[type=checkbox]:checked ~ div.panel {
    float: left;
    margin: 5px 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
            transform: translate(0, 50%);
}

.accordion__item input[type=checkbox]:not(:checked) ~ span {
    padding-top: 5px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion__item input[type=checkbox]:checked ~ span {
    padding-top: 5px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

.panel {
    background-color: transparent;
    border: 1px solid grey;
}
<body>
    <div class="accordion">
        <ul class="">
            <li class="accordion__item">
                <input type="checkbox" checked="checked" />
                <p class="readme">Choose another   cool destination</p>           
                <span class="">
                    <svg viewBox="1 1 22 22" width="1em" height="1em" aria-hidden="true" focusable="false" class="icon-svg"><path d="M21.7 6.79a1 1 0 00-1.41 0L12 15.08 3.71 6.79a1 1 0 00-1.41 0 1 1 0 000 1.42l9 9a1 1 0 001.42 0l9-9a1 1 0 00-.02-1.42z"></path></svg>
                </span>
                <div class="panel">
                    <strong>
                        <a href="www.google.com">London</a>, 
                        <a href="www.google.com">NYC</a>, 
                        <a href="www.google.com">LA</a>, 
                        <a href="www.google.com">LAX</a>, 
                        <a href="www.google.com">Dublin</a>, 
                        <a href="www.google.com">Liverpool</a>,
                        <a href="www.google.com">Manchester</a>, 
                        <a href="www.google.com">Dubai</a>, 
                        <a href="www.google.com">Hong Kong</a>, 
                        <a href="www.google.com">Singapre</a>.
                    </strong>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

Попробуйте использовать pointer-events

.accordion__item input[type="checkbox"]:checked ~ div.panel {
    float: left;
    margin: 5px 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    pointer-events: none;
}

.panel {
    background-color: transparent;
    border: 1px solid grey;
    pointer-events: all;
}
1 голос
/ 13 февраля 2020 
.accordion__item input[type=checkbox]:checked ~ div.panel {
    float: left;
    margin: 5px 0;
    max-height: 0;
    //opacity: 0; instead use display: none
    -webkit-transform: translate(0, 50%);
            transform: translate(0, 50%);
}

Отметьте принятый ответ, если вы считаете, что ответ правильный

...