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 中较晚的元素（作为后来的兄弟姐妹，或后代，或这两者的组合）而不是它们所在的元素重新设置样式。因此，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 回答