css - 基于 :target (No JS) 显示/隐藏切换文本

Question

我试图创建的是一个无需使用 JavaScript 或 jQuery 即可工作的切换。我遇到的主要问题是当 :target 应用于 #menu 选择器时，让切换文本从打开切换到关闭。默认情况下，导航是折叠的，通过#menu toggle 打开。

HTML

<nav class="site-nav" id="menu">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</nav>

<section class="site-nav__toggle">
  <a class="site-nav__toggle--open" href="#menu">Open</a>
  <a class="site-nav__toggle--close" href="">Close</a>
</section>

通过 SCSS 的 CSS

.site-nav {
  border-bottom: 4px solid black;
  float: left;
  height: 0;
  overflow: hidden;
  width: 100%;

  &:target {
    height: 100%;
      min-height: 170px;
    transition: height .25s ease, min-height .25s ease;
  }
}

.site-nav__toggle--open > .site-nav:target,
.site-nav__toggle--close > .site-nav {
  display: none;
}

.site-nav__toggle--close > .site-nav:target,
.site-nav__toggle--open > .site-nav {
  display: inline;
}

我遇到的主要问题是文本没有打开目标状态。如果我在这个特定问题中遗漏了任何内容，也许第二双眼睛会有所帮助并发现明显的问题。

Answer 1

来自 W3C:

div > p

Selects all P elements where the parent is a DIV element

div + p

Selects all P elements that are placed immediately after DIV elements

我认为你的选择器应该是这样的

.site-nav:target + .site-nav__toggle .site-nav__toggle--open,
.site-nav + .site-nav__toggle .site-nav__toggle--close {
  display: none;
}

.site-nav:target + .site-nav__toggle .site-nav__toggle--close,
.site-nav + .site-nav__toggle .site-nav__toggle--open {
  display: inline;
}

检查这个代码笔:

http://codepen.io/anon/pen/goAIu

最好的，马立克