通常我会将移动网站上的冗长菜单设置为初始display: none
并使用Javascript
"展开"按钮将它们切换回display: flex
(或其他)。
但这一次,我无法隐藏灵活的父母。我必须只隐藏某些弹性儿童,因为某些其他儿童必须是可见的。但没有display: flex-child
切换回......
有解决方案吗?
答案 0 :(得分:4)
Flex项目是flex项目,不是因为它们有一些特殊的display
值,而是因为它们是flex容器的子项。 display
值几乎无关紧要,因为无论如何它都会被阻塞。
因此,您可以在display: none
和display: block
之间切换,例如。
但也要考虑collapsing:
在Flex项目上指定
visibility: collapse
会使其成为a 折叠弹性项,在表格行或表格列上产生类似于visibility: collapse
的效果:折叠的弹性项目为 完全从渲染中移除,但留下了一个" strut"那 保持柔性线的交叉尺寸稳定。因此,如果Flex容器只有一个弹性线,则动态地 折叠或不折叠项目可能会更改Flex容器的主要内容 尺寸,但保证不会影响其交叉尺寸,也不会 导致页面的其余部分布局为"摆动"。
ul, ul > li {
display: inline-flex;
flex-flow: column;
}
ul > li {
border: 1px solid;
}
ul > li:not(:target):not(:hover) > ul {
visibility: collapse;
}

<ul>
<li id="nav-about"><a href="#nav-about">About</a>
<li id="nav-projects"><a href="#nav-projects">Projects</a>
<ul>
<li>Art</li>
<li>Architecture</li>
<li>Music</li>
</ul>
<li id="nav-interact"><a href="#nav-interact">Interact</a>
</ul>
<p>Hover over the menu above: each section expands to show its sub-items. In order to keep the menu width stable, <code>visibility: collapse</code> is used instead of <code>display: none</code>. This results in a sidebar that is always wide enough for the word “Architecture”, even though it is not always visible.</p>
&#13;