javascript - CSS - <a> 标签上的过渡高度

Question

你好，

我想制作一个超链接，点击时从上向下展开，再次点击时关闭。我还想要对链接文本应用淡入淡出效果。

我试过这样的:

HTML

<div id="lime">
         <a href="#">hi</a>
         <p id="red">How are you doing?</p>
         </div>

CSS

#lime
{
background-color:#deff00;
text-align:center;
}
#lime:hover{
height:300px;
transition:height 1s;
}
#lime:hover p{
opacity:1;
transition:opacity 1s;
}
#red {
opacity:0;
color:#ff0000;
}

CSS Demo

但是效果发生在将鼠标悬停在链接上时。我希望链接在单击时从上向下扩展。

我也试过这个，但我对 javascript 一无所知。

HTML

<div><a href="#" id="btn">hi</a></div>

CSS

div{
background-color:#deff00;
text-align:center;
}
#expand {
height:300px;
transition:height 1s;
}
#contract {
background-color:#deff00;
transition:height 1s;
}

Javascript

$('#btn').click(function(e){    
$('#expand') function(){
    $('#contract').transition('height 1s');
});
};

Javascript Demo

Answer 1

您需要创建两个样式类 - 一个将您的 div 扩展到所需的高度，另一个将其折叠到初始位置。代码示例如下 -

HTML

<div id="lime"><a href="#" id="btn">hi</a></div>

CSS

div{
    background-color:#deff00;
    text-align:center;
    height: 20px;
}

#contract {
    background-color:#deff00;
    transition:height 1s;
}

.expand {
    height:300px;
    transition:height 1s;
}

.collapse {
    height: 20px;
    transition:height 1s;
}

JavaScript

$(document).ready(function () {
    $('#btn').click(function (e) {    
        if ($("#lime").hasClass("expand")) {
            $("#lime").removeClass('expand').addClass('collapse');
        }
        else {
            $("#lime").removeClass('collapse').addClass('expand');
        }
    });
});

DEMO .