html - 通过 css 有条件地隐藏/显示元素

Question

我正在动态生成菜单项。但是我一次显示 5 个菜单。如果菜单数量超过 5 , 我正在展示 <<< Left & >>> Right按钮进行导航。是否有任何解决方法，只有当菜单数量超过 5 个时，我才能显示这些按钮。 按钮将被隐藏，如果菜单数量是<=5 .

最初我有 10 个菜单:

[Menu1][Menu2][Menu3][Menu4][Menu5][Menu6][Menu7][Menu8][Menu9][Menu10]

限于篇幅，一次只显示5个:

<<< [Menu1][Menu2][Menu3][Menu4][Menu5] >>>

可以通过单击右/左导航来访问其他菜单。

所以每次都不会有超过 5 个菜单，所以如果我有 <=5 个菜单，则不应显示右/左导航按钮。:

[Menu1][Menu2][Menu3][Menu4][Menu5]

我们可以只使用 CSS 来完成这项工作吗？ 如果您需要对问题进行更多说明，请发表评论。

Answer 1

Demo Fiddle

Same code...fewer items

当然，只需利用 nth-child 以及第 6 项上的伪元素。以下内容需要根据您的确切要求进行编辑，但将为您提供一个足够好的开始来进行游戏。

HTML

<ul>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
</ul>

CSS

ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    word-wrap:nowrap;
    white-space:nowrap;
    font-size:0;
    position:relative;
    text-align:center;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
}
li:nth-child(5):before {
    content:'<<';
    position:absolute;
    left:0;
}
li:nth-child(5):after {
    content:'>>';
    position:absolute;
    right:0;
}
li:nth-child(n+6) {
    display:none;   
}