CSS - 上<a>标签

我想使点击时从上往下扩展，并再次点击时关闭的超链接。我也希望将淡入淡出效果应用于链接文字。

我想是这样的：

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

来源

2013-11-22 Criss

你使用jQuery吗？ –

没有。我应该使用它的JavaScript？ – Criss

不，不是必须的，但我可以看到你已经在使用它。无论如何，你是否在寻找[this]（http://jsfiddle.net/7yeG7/3/）？ –

您需要创建两个样式类 - 一个会将您的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。

来源

2013-11-22 06:21:12

你可以很容易地使用j查询。如下图所示

例子：

<!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/

来源

2013-11-22 06:33:58

我完全有Sayem艾哈迈德的答案同意...

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

这里是

DEMO

选项2您可以使用纯JavaScript代码，使得它完成。

这里是

DEMO

希望这会有所帮助！

来源