HTML/CSS 中的可折叠面板

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16500907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:18:17  来源:igfitidea点击:

Collapsible Panel in HTML/CSS

htmlcss

提问by xisk

I'm putting together a website. I need help creating the following feature:

我正在整理一个网站。我需要帮助创建以下功能:

I want the "About" link to expand into a panel when clicked, and retract when the user presses "hide" in the panel. I've attached a diagram below to clarify what it should look like. When the user presses About in (1), it becomes (2), and when the user presses hide in (2), it becomes (1) again.

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

layout

布局

I would like to do this in pure HTML/CSS, if possible. Does anyone know how I can do this?

如果可能,我想在纯 HTML/CSS 中执行此操作。有谁知道我怎么能做到这一点?

回答by adaam

This answer explains how it can be achieved in full: Pure CSS collapse/expand div

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

Here is a quick rundown:

这是一个快速概述:

<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

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;
}

And the working jsFiddle:

和工作jsFiddle:

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

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

Again none of the above is my work just to clarify, but it just goes to show how easy it is to find it on Google!!

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

回答by Faishal

You need litle javascript to trigger an event (show/hide div)

你需要一点 javascript 来触发一个事件(显示/隐藏 div)

<a href="#"> Home </a>

<a class="right" href="javascript:toggle_messege('inline')" id='href_about'> About </a>
<br />
<a class="right hide" href="javascript:toggle_messege('none')" id='hreh_close'> (Close)</a>

<div id='div_messege' class='hide'>Hidden messege to show, Hidden messege to show Hidden messege to show Hidden messege to show</div>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>

CSS

CSS

.right {
    float:right;
}
.hide {
    display:none
}

javascript

javascript

function toggle_messege(type) {
 document.getElementById("div_messege").style.display = type;
    document.getElementById("hreh_close").style.display = type;

}

check this for running example http://codepen.io/faishal/pen/IHEyw

检查这个运行示例http://codepen.io/faishal/pen/IHEyw