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;
}

DEMO

或者，如果您希望它在每次点击时展开和折叠，您可以使用常规的老式 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'
    }
});

DEMO

或者使用 JQuery...

JQuery

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

Moar Demo