Question

我正在动态生成菜单项。但是我一次显示5个菜单。如果菜单数超过5，我会显示<<< Left＆amp;导航>>> Right按钮。有没有任何工作，只有当Menus的数量超过5时，才能显示这些按钮。按钮将隐藏，如果菜单的数量为<=5。

最初我有10个菜单：

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

由于空间限制，一次只显示5个：

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

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

所以每次都不会有超过5个菜单，所以如果我有＆lt; = 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;   
}

Answer 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>

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

2 个答案:

Demo Fiddle