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

Answer 2

在div的css上指定:active。点击时div会展开，没有点击时会折叠。

.membershipwrap:active {
    height: 150px;
}

Div目标/主动转换

2 个答案: