显示/隐藏切换文本基于：目标（无JS）

Question

我想创建的是一个切换，可以使用，而无需使用JavaScript或jQuery。我遇到的主要问题是在以下情况下将切换文本从打开切换为关闭：在#menu选择器上应用目标。导航默认折叠，并通过#menu切换打开。

通过SCSS

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

主要的问题我有

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

CSS HTML是文本未在目标状态的切换。如果我在这个特定的问题上错过了任何东西，也许第二双眼睛会帮助并发现显而易见的东西。

Answer 1

从W3C：

DIV>点

选择所有P个元素，其中该亲本是一个DIV元件

DIV + P

选择被立即置于所有P个元素DIV元件后

我觉得你的选择应该像

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

入住此codepen：

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

最佳， 马立克