请问一下。我想用html、css写出这种效果。点击展开，下面那一行就展开，再点击就收缩回去。怎么写啊？？_随笔

css一般处理鼠标移动显示事件，利用:hover很方便就能实现。

点击事件的话，一般跟JS配合。

显示隐藏，一般都是利用display这个CSS来控制，因为它隐藏的时候不占位置。

1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。

2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。

3．运行代码，效果如下。

4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。

5．运行代码，效果如下：可见，经过CSS样式美化，当鼠标经过时，显示蓝色。

6．使用CSS代码，实现鼠标在上面显示下划线效果，代码如下。

7．在浏览器中运行代码以达到预期的效果。

这样就是一个展开收缩的效果了

<body>

<ul>

</ul>

</div>

var oDiv = document.getElementById('div1')

var oUl = oDiv.getElementsByTagName('ul')[0]

var Off = true

oDiv.onclick = function(){

if(Off){

oUl.style.display = "block"

Off = false

}else{

oUl.style.display = "none"

Off = true

}

</script>

欢迎分享，转载请注明来源：内存溢出

请问一下。我想用html、css写出这种效果。点击展开，下面那一行就展开，再点击就收缩回去。怎么写啊？？