HTML/CSS中的可折叠面板

发布时间:2019-12-08 整理:脚本之家
脚本之家收集整理的这篇文章主要介绍了HTML/CSS中的可折叠面板脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
我正在组建一个网站.我需要帮助创建以下功能:

我希望“关于”链接在单击时展开到面板中,并在用户按下面板中的“隐藏”时收回.我在下面附上了一张图表来说明它应该是什么样子.当用户在(1)中按下约时,它变为(2),并且当用户按下(2)中的隐藏时,它再次变为(1).

如果可能的话,我想在纯HTML / CSS中这样做.有谁知道我怎么做到这一点?

解决方法

这个答案解释了如何完全实现: Pure CSS collapse/expand div

这是一个快速纲要:

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

CSS

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
  vertical-align: top; 
  height: auto; 
}

.list {
  display:none; 
  height:auto;
  margin:0;
  float: left;
}

.show {
  display: none; 
}

.hide:target + .show {
  display: inline; 
}
.hide:target {
  display: none; 
}
.hide:target ~ .list {
  display:inline; 
}

/*style the (+) and (-) */
.hide,.show {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 0 #666;
  text-align: center;
  text-decoration: none;
  box-shadow: 1px 1px 2px #000;
  background: #cccbbb;
  opacity: .95;
  margin-right: 0;
  float: left;
  margin-bottom: 25px;
}

.hide:hover,.show:hover {
  color: #eee;
  text-shadow: 0 0 1px #666;
  text-decoration: none;
  box-shadow: 0 0 4px #222 inset;
  opacity: 1;
  margin-bottom: 25px;
}

.list p {
  height:auto;
  margin:0;
}
.question {
  float: left;
  height: auto;
  width: 90%;
  line-height: 20px;
  padding-left: 20px;
  margin-bottom: 25px;
  font-style: italic;
}

和工作的jsFiddle:

http://jsfiddle.net/dmarvs/94ukA/4/

再一次,上述所有内容都不是我的工作,只是为了澄清,但它只是表明在Google上找到它是多么容易!

总结

以上是脚本之家为你收集整理的HTML/CSS中的可折叠面板全部内容,希望文章能够帮你解决HTML/CSS中的可折叠面板所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!