使用：目标和相邻的兄弟选择器作出切换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

回答

相关问题