在移动设备上的菜单中隐藏一项 [英] Hide one item from menu on mobile

查看：21
本文介绍了在移动设备上的菜单中隐藏一项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap 构建菜单.当页面为小屏幕调整大小时，我得到了我的汉堡包图标，它显示了菜单中的所有项目.有没有办法从该菜单中隐藏一个项目?我不希望我的购物车出现在汉堡包下面.我可以自己编写一些 jQuery 代码来做到这一点，但我想知道 Bootstrap 是否已经有办法做到这一点?

<!-- 结束导航栏标题--><div id="navMain" class="navbar-collapse collapse"><div class="navbar-collapse"><ul class="nav navbar-nav navbar-right">

  • <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>购物车</a><ul class="dropdown-menu" role="menu"><li><a href="#">A</a></li><li><a href="#">B</a></li>
  • <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的账户 <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><div class="row" style="width: 400px;"><ul class="list-unstyled col-md-3" role="menu"><li><a href="#">A</a></li><li><a href="#">B</a></li><ul class="list-unstyled col-md-3" role="menu"><li><a href="#">A</a></li><li><a href="#">B</a></li>

    • <div class="navbar-collapse"><ul class="nav navbar-nav">

  • <a href="#" class="dropdown-toggle" data-toggle="dropdown">选项 X <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">A</a></li><li><a href="#">B</a></li>
  • <a href="#" class="dropdown-toggle" data-toggle="dropdown">选项 Y <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">A</a></li><li><a href="#">B</a></li>
    • <ul class="nav navbar-nav navbar-right"><li class="active"><a href="#">选项 Z</a></li>

    <!-- 结束 navMain -->

    <!-- 结束容器流体--></nav><!-- 结束容器流体--><!-- Bootstrap 核心 JavaScript==================================================--><!-- 放置在文档的末尾，以便页面加载更快--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><!-- 针对 Surface/桌面 Windows 8 错误的 IE10 视口破解 --><script src="js/ie10-viewport-bug-workaround.js"></script>

    解决方案

    如果您使用 Bootstrap 响应式实用程序，这很容易类 hidden-* 类.在您的情况下，将 hidden-xs 添加到按钮.

    示例:http://www.bootply.com/44PQOE3vg1

    I am using Bootstrap to build a menu. When the page is resized for small screens I get my hamburger icon and it shows all items in the menu. Is there a way to hide one item from that menu? I don't want my Cart to show up under the hamburger. I could write some jQuery code myself to do that, but I am wondering if Bootstrap already has a way to do that?

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navMain" aria-expanded="false" aria-controls="navMain"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <button type="button" class="navbar-toggle btn-lg"> <span class="sr-only">Shopping Cart</span> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> </button>
            <a class="navbar-brand" href="#">Title</a> </div>
        <!-- end navbar-header -->

        <div id="navMain" class="navbar-collapse collapse">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Cart </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">A</a></li>
                            <li><a href="#">B</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <div class="row" style="width: 400px;">
                                    <ul class="list-unstyled col-md-3" role="menu">
                                        <li><a href="#">A</a></li>
                                        <li><a href="#">B</a></li>
                                    </ul>
                                    <ul class="list-unstyled col-md-3" role="menu">
                                        <li><a href="#">A</a></li>
                                        <li><a href="#">B</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option X <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">A</a></li>
                            <li><a href="#">B</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option Y <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">A</a></li>
                            <li><a href="#">B</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Option Z</a></li>
                </ul>
            </div>
        </div>
        <!-- end navMain --> 
    </div>
    <!-- end container-fluid --> 
</nav>
<!-- end container-fluid --> 

<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="js/ie10-viewport-bug-workaround.js"></script>

    解决方案

    It's pretty easy if you use the Bootstrap responsive utility classes hidden-* classes. In your case, add hidden-xs to the button.

    <button type="button" class="navbar-toggle btn-lg hidden-xs">

    Example: http://www.bootply.com/44PQOE3vg1

    这篇关于在移动设备上的菜单中隐藏一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    其他开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆