怎么用html和css实现标签折叠

html-css015

怎么用html和css实现标签折叠,第1张

用html和css实现标签折叠,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>用html和css实现标签折叠</title>

</head>

<body>

<ul id="fm">

      <li><a href="#"><h1>折叠标签A</h1>

          <span>这里是描述标签A</span>

<span>这里是描述标签A</span>

<span>这里是描述标签A</span>

</a></li>

      <li><a href="#"><h1>折叠标签B</h1>

          <span>这里是描述标签B</span>

<span>这里是描述标签B</span>

<span>这里是描述标签B</span></a>

      <li><a href="#"><h1>折叠标签C</h1>

          <span>这里是描述标签C</span>

<span>这里是描述标签C</span>

<span>这里是描述标签C</span></a>

<li><a href="#"><h1>折叠标签D</h1>

          <span>这里是描述标签D</span>

<span>这里是描述标签D</span>

<span>这里是描述标签D</span></a>

  </ul>

</body>

</html>

CSS样式为:

<style type="text/css">

#fm{

  overflow:hidden

  background-color:#FFCCCC

  width:200px

  height:500px

  overflow:hidden

}

#fm h1{

  margin:0px

  color:#FF3333

  font-size:14px

}

#fm li{

  list-sytle-type:none

  display:block

  width:178px

  border:1px solid #00CCCC

  border-bottom-width:0px

}

#fm li.end{

  border-bottom-width:1px

}

#fm li a{

  display:block

  text-decoration:none

  width:100%

  padding:10px

}

#fm li a span{

  display:none

  color:#000000

  font-size:12px

  padding-top:10px

}

#fm li a:hover{

  background:#fff

}

#fm li a:hover span{

  display:block

  cursor:hand

}

</style>

效果如图:

以上就是用html和css实现标签折叠的解决方法。

css页面折叠可以通过display:block/none 来控制内容显示和隐藏。 同时用js来触发。

你的采纳是我前进的动力!

记得好评和采纳,答题不易,互相帮助,

手机提问的朋友在客户端右上角评价点满意即可.

如果你认可我的回答,请及时点击采纳为满意回答按钮!