21

Webサイトをまとめています。次の機能を作成するのに助けが必要です:

クリックすると「About」リンクがパネルに展開され、ユーザーがパネルで「非表示」を押すと収縮します。どのように見えるべきかを明確にするために、以下の図を添付しました。(1)でAboutを押すと(2)になり、(2)でhideを押すとまた(1)になります。

レイアウト

可能であれば、純粋な HTML/CSS でこれを行いたいと考えています。誰も私がこれを行う方法を知っていますか?

4

2 に答える 2

26

この回答は、それを完全に達成する方法を説明しています: 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で見つけるのがいかに簡単かを示しています!!

于 2013-05-11T20:03:59.067 に答える
5

イベントをトリガーするための JavaScript はほとんど必要ありません (show/hide 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

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

JavaScript

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

}

例を実行するには、これを確認してください http://codepen.io/faishal/pen/IHEyw

于 2013-05-11T19:51:26.770 に答える