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

Answer 2

您可以使用j Query轻松完成此操作。

以下示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
#lime
    {
    background-color:#deff00;
    text-align:center;
    }

.para {
    color:red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div id="lime">
             <a href="#" id="click">hi</a>
             <p id="red" class="para">How are you doing?</p>
</div>
<script>
$( "#click" ).click(function() {
$( "#red" ).slideToggle( "slow" );
});
</script></body>
</html>

您可以参考此链接http://api.jquery.com/slideToggle/

Answer 3

我完全同意Sayem Ahmed的回答......

这里有一些额外的答案 选项1。如果您当时正在使用jQuery，您也可以使用切换来实现此方案。

这是

DEMO

选项2。您可以使用纯JavaScript代码完成此操作。

这是

DEMO

希望这会有所帮助!!

CSS - <a> tag</a>上的过渡高度

3 个答案: