使用：目標和相鄰的兄弟選擇器作出切換botton

無論如何，我試圖創建一個切換鏈接，基本上是兩個按鈕在彼此之上。點擊時，其中一個將變爲display:none，反之亦然。使用：目標和相鄰的兄弟選擇器作出切換botton

目前，我的CSS是這樣

#main-nav:target + .page-wrap { 
    position:absolute; 
    left:-80px; 
    #open-menu { 
    display: none; 
    } 
    #close-menu { 
    display: block; 
    } 
}

...但是＃打開菜單和＃關閉菜單的顯示選項似乎沒有展示的原因。任何幫助？

編輯：好吧，所以我需要一個預處理器好吧._。

編輯再次：得到它的工作，謝謝你們！只是想知道，有沒有辦法讓我的整個頁面div（不包括菜單）滑動頁面的列出？或者它是一些簡單的溢出x：隱藏？

來源

2013-04-11 user2270163

您不能在純CSS中嵌套這樣的規則。你正在使用一些CSS預處理？ – xec 2013-04-11 12:02:13

我認爲你需要一些JavaScript或jQuery來將一個動作綁定到按鈕上。 CSS本身不會這樣做。 – 2013-04-11 12:03:25

如果你不使用預處理，你不想要，我懷疑你可以重寫你的CSS這樣的，假設你的HTML結構實際上相當於選擇：

#main-nav:target + .page-wrap { 
    position: absolute; 
    left: -80px; 
} 

#main-nav:target + .page-wrap #open-menu { 
    display: none; 
} 

#main-nav:target + .page-wrap #close-menu { 
    display: block; 
}

當然，如果#open-menu和#close-menu不是.page-wrap的後代，那麼即使您使用預處理器來支持編寫嵌套樣式規則，它也不會起作用（因爲預處理器如果不能用純CSS）。如上所述，如果這些元素與可以用後代和兄弟組合器表達的方式不相關，那麼您必須利用JavaScript來實現您正在嘗試做的事情。

來源

2013-04-11 12:15:30 BoltClock

作爲示範，我試過如下：

<div class="page-wrap"> 
    <a id="close-menu" href="#open-menu">Close</a> 
    <a id="open-menu" href="#close-menu">Open</a> 
</div>

與下面的CSS：

.page-wrap #open-menu { 
    display: block; 
} 
.page-wrap #close-menu { 
    display: none; 
} 

.page-wrap #open-menu:target { 
    display: block; 
} 
.page-wrap #open-menu:target + #close-menu { 
    display: none; 
} 

.page-wrap #close-menu:target { 
    display: block; 
} 
.page-wrap #close-menu:target + #open-menu { 
    display: none; 
}

小提琴參考：http://jsfiddle.net/audetwebdesign/5aSdW/
演示鏈接：http://jsfiddle.net/audetwebdesign/5aSdW/show

每次單擊打開或關閉鏈接，則顯示備用鏈接。

我不確定這是否過分有用，但可以完成。

來源

2013-04-11 13:21:10

使用：目標和相鄰的兄弟選擇器作出切換botton

回答

相關問題