2

私はこのコードを持っており、リストをデフォルトで折りたたむようにしたいと考えています。これが現在の動作です。

<!DOCTYPE html>
<head>
   <title>menu mockup</title>
   <style type="text/css">
      .show {display: none; }
      .hide:focus + .show {display: inline; }
      .hide:focus { display: none; }
      .hide:focus ~ #list { display:none; }
      @media print { .hide, .show { display: none; } }
   </style>
</head>
<body>
   <p>Here's a list</p>
      <div>
         <a href="#" class="hide">[hide]</a>
         <a href="#" class="show">[show]</a>
         <ol id="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
         </ol>
      </div>
   <p>How about that?</p>
</body>
</html>
4

2 に答える 2

2

純粋な CSS でこれを機能させるには、HTML を変更する必要があります (CSS は、DOM で後で表示される要素 (後の兄弟、子孫、またはこれら 2 つの組み合わせとして) のみをターゲットにできるため、それらの要素よりも後から表示されます)。 re styled. したがって、HTML は次のようになります。

<p>Here's a list</p>
<div id="top">
    <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
    <a href="#top" class="hide">[hide]</a>
    <a href="#list" class="show">[show]</a>
</div>
<p>How about that?</p>​

また、リストを非表示divにできるようにidするために、 に が追加されたことにも注意してください(ここでも、CSS と基本的な HTML のみを使用します)。

CSS はやや複雑ですが、次のように説明されてい/* comments in the CSS itself */ます。

.show,
.hide {
    /* allows for the links to be positioned 'ahead' of the list
       whose appearance they control */
    position: absolute;
    top: 0.1em;
    /* allows for an assigned width, height, etc... */
    display: inline-block;
    width: 5em;
    height: 2em;
    line-height: 2em;
    text-align: center;
}

.hide {
    left: 0;
}

.show {
    /* this is why we have an assigned width */
    left: 5.1em;
}

#list {
    /* hides on page-load */
    display: none;
}

#list:target {
    /* when clicking the 'show' link the #list is targeted
       and is shown */
    display: block;
}

#list:target ~ .show {
    /* reduces the opacity of the 'show' link, when
       the list is already shown */
    opacity: 0.3;
}

#list:target ~ .hide {
    /* when the list is shown, the 'hide' link is visible */
    opacity: 1;
}

#top {
    /* allows the links to be positioned visually ahead of,
       and relative to, the menu */
    position: relative;
    /* slightly greater than the defined height of
       the link elements */
    padding-top: 2.2em;
}

#top .hide,
#top:target  .hide {
    /* hides the 'hide' link when the list is, itself, hidden */
    opacity: 0.3;
}

JS フィドルのデモ。

わずかに修正された (リンクをラップするために追加された別の要素) バージョンで、より簡単に配置できるようにします (位置を設定する前に各リンクの幅を手動で計算する必要はありませんleft)。

<p>Here's a list</p>
<div id="top">
    <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
    <!-- could use a div, it doesn't matter -->
    <span id="controls">
        <a href="#top" class="hide">[hide]</a>
        <a href="#list" class="show">[show]</a>
    </span>
</div>
<p>How about that?</p>​

CSS の場合:

#controls {
    position: absolute;
    top: 0.1em;
    left: 0;
    height: 2em;
    line-height: 2em;
}

.show,
.hide {
    display: inline-block;
    width: 5em;
    text-align: center;
}

#list {
    display: none;
}

#top {
    position: relative;
    padding-top: 2.2em;
}

#list:target {
    display: block;
}

#list:target ~ #controls .hide {
    opacity: 1;
}

#list:target ~ #controls .show {
    opacity: 0.3;
}

#top #controls .hide {
    opacity: 0.3;
}
#top:target #controls .hide {
    opacity: 0.3;
}

JS フィドルのデモ。

または、代わりにvisibility: hidden/visibility: visible;を使用します。

于 2012-10-29T18:43:32.337 に答える
-1

この HTML コードは、デフォルトでリストを折りたたみます

<!DOCTYPE html>
<head>
   <title>menu mockup</title>
   <style type="text/css">
      .show {display: inline; text-decoration: none;}
      .hide {display: none; text-decoration: none;}
      #list {display: none;}
      .show:focus + .hide {display: inline;}
      .hide:focus + #list { display:none;}
      .show:focus ~ #list { display:inline;}
      .show:focus { display:none;}

   </style>
</head>
<body>
   <p>Here's a list</p>
      <div>


         <a href="#" class="show">&#x25BC</a>
         <a href="#" class="hide">&#x25B2</a>
         <ol id="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
         </ol>

      </div>
  </body>
</html>
于 2013-07-09T17:25:00.560 に答える