顯示/隱藏切換文本基於：目標（無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

最佳， 馬立克