Flexbox child:任何重置方式" display:none"?

时间:2017-01-18 04:30:45

标签: javascript css3 flexbox

通常我会将移动网站上的冗长菜单设置为初始display: none并使用Javascript"展开"按钮将它们切换回display: flex(或其他)。

但这一次,我无法隐藏灵活的父母。我必须只隐藏某些弹性儿童,因为某些其他儿童必须是可见的。但没有display: flex-child切换回......

有解决方案吗?

1 个答案:

答案 0 :(得分:4)

Flex项目是flex项目,不是因为它们有一些特殊的display值,而是因为它们是flex容器的子项。 display值几乎无关紧要,因为无论如何它都会被阻塞。

因此,您可以在display: nonedisplay: 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;
&#13;
&#13;