css - div 目标/活动转换

Question

我无法让 div 在点击时展开，我只能在使用悬停时让它工作。我尝试将 div 包装在一个但没有骰子中。有小费吗？

CSS

.membershipwrap {
    overflow: hidden;
    height: 50px;
    background: #dadada;
    width: 200px;
    -webkit-transition: all .3s linear .3s;
    -moz-transition: all .3s linear .3s;
    -ms-transition: all .3s linear .3s;
    -o-transition: all .3s linear .3s;
    transition: all .3s linear .3s;
}
.membershipwrap:hover {
    height: 150px;
}

HTML

<div class="membershipwrap">
  <p>Lorem Ipsum Test</a></p>
  <p>a;sdjf;jksdfkjas;dfj;safdj</p>
  <p>;klasdjf;kajs;dflklsafdj;kasjdfk;asjf</p>
  <p>;ksdjf;lkasdfjak;sdjfka;dfjs</p>
</div>

Answer 1

我认为这将是没有任何 jquery 或 javascript 的唯一方法。

HTML

<!--// wrap the whole thing in an an a tag that points to an id on the div (can be anything) //-->
<a href="#random">
<div class="membershipwrap" id="random">
  <p>Lorem Ipsum Test</a></p>
  <p>a;sdjf;jksdfkjas;dfj;safdj</p>
  <p>;klasdjf;kajs;dflklsafdj;kasjdfk;asjf</p>
  <p>;ksdjf;lkasdfjak;sdjfka;dfjs</p>
</div>
</a>

CSS

    .membershipwrap {
    overflow: hidden;
    height: 50px;
    background: #dadada;
    width: 200px;
    -webkit-transition: all .3s linear .3s;
    -moz-transition: all .3s linear .3s;
    -ms-transition: all .3s linear .3s;
    -o-transition: all .3s linear .3s;
    transition: all .3s linear .3s;
}
/* add :target */
.membershipwrap:target {
    height: 150px;
}

演示

或者，如果您希望它在每次点击时展开和折叠，您可以使用常规的老式 javascript...

CSS

.expanded {
    height: 150px;
}

Javascript

var el = document.getElementById("wrap");
el.addEventListener('click', function(){
    if(this.className.indexOf('expanded') === -1){
        this.className += ' expanded';
    }
    else {
        this.className = 'membershipwrap'
    }
});

演示

或者使用 JQuery...

jQuery

$('.membershipwrap').click(function(){
    $(this).toggleClass('expanded');
});

摩尔演示

Answer 2

:active在 div 的 css 上指定。div 将在单击时展开，在未单击时折叠。

.membershipwrap:active {
    height: 150px;
}