通过 css 有条件地隐藏/显示元素答案

【问题标题】：hide/show an element conditionally via css通过 css 有条件地隐藏/显示元素
【发布时间】：2014-08-01 20:05:43
【问题描述】：

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

最初我有 10 个菜单：

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

由于篇幅限制，一次只显示5个：

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

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

所以每次都不会有超过 5 个菜单，所以如果我有

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

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

【问题讨论】：

是的，这可以做到。但这取决于您的代码，最好的实现是什么。重要的是要知道，当您使用 < left right > 按钮时会发生什么。最好发布您的代码并提供一个简单的演示。
如果菜单是动态生成的，那为什么不能动态生成<<和>>呢？
我正在寻找它...使用 CSS3

标签： html css

【解决方案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;   
}

【讨论】：

非常好+1。老实说，我没想到会这么简单。
感谢您的尝试，但我的箭头不是“ul”的一部分，它们是“ul”之后和之前的单独按钮。
@ankit - 单独使用 CSS 和 HTML 无法做到这一点，您需要使用 javascript。

【解决方案2】：

试试这个代码：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            /**
             *
             * General
             *
             **/
            *{
                margin: 0;
                padding: 0;
                border-radius: 0;
                outline-offset: 0;
                border: 0 transparent none;
                outline: 0 transparent none;

                font-family: monospace;
                font-size: 12px;

                text-align: left;
                text-decoration: none;
                text-indent: 0;
                text-transform: none;

                text-align: left;
                color: rgba(120, 120, 120, 1);
                background-color: transparent;
                background-image: none;
            }
            nav::selection,
            nav *::selection{
                background-color: transparent;
            }
            nav{
                display: block;
                font-size: 0;
                text-align: center;
            }
            nav>a,
            nav>span{
                display: inline-block;
                padding: 5px;
                color: rgba(255, 255, 255, 1);
                background-color: rgba(20, 120, 220, .7);
            }
            nav>span{
                cursor: pointer;
                background-color: rgba(120, 120, 120, 1);
            }
            nav>span:first-child{border-radius: 10px 0 0 10px;}
            nav>span:last-child{border-radius: 0 10px 10px 0;}
            /**
             *
             * Focus here
             *
             **/
            nav>a{display: none;}
            nav>a:not(:nth-of-type(n+6)){display: inline-block}
            nav>span:first-child:not(:nth-last-child(n+8)){display: none}
            nav>span:last-child:not(:nth-child(n+8)){display: none}
        </style>
    </head>
    <body>
        <nav>
            <span>&laquo;</span>
            <a href="#">0001</a>
            <a href="#">0002</a>
            <a href="#">0003</a>
            <a href="#">0004</a>
            <a href="#">0005</a>
            <a href="#">0006</a>
            <a href="#">0007</a>
            <a href="#">0008</a>
            <a href="#">0009</a>
            <a href="#">0010</a>
            <a href="#">0011</a>
            <span>&raquo;</span>
        </nav>
        <script type="text/javascript" src="js/libs/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $('nav>span:last-child').click(function() {
                $('nav>a:first-of-type').insertBefore(this);
            });
            $('nav>span:first-child').click(function() {
                $('nav>a:last-of-type').insertAfter(this);
            });
        </script>
    </body>
</html>

【讨论】：