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

或者，如果你希望它擴大和每次點擊崩潰，你可以用做規則的老式javascri PT ...

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

Answer 2

指定的div的CSS :active。點擊時div會展開，並且在未點擊時會摺疊。

.membershipwrap:active { 
    height: 150px; 
}