jquery - 试图制作一个隐藏每个元素的响应式导航栏

Question

我正在尝试制作类似于 BBC 的导航栏其中显示的元素取决于有多少可以适合当前屏幕宽度，其余元素隐藏在下拉菜单中。

使用 Bootstrap，我的导航栏中的所有元素一旦达到一定宽度就会隐藏。我一直在尝试梳理他们网站上的代码，但运气不佳。

我想就如何做到这一点征求您的建议。

Here is my code so far

谢谢!

编辑:你知道吗，我将自己制作而不使用 Bootstrap 。

HTML 代码:

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <div class="inline-div">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <span class="inline-div responsive-menu">Menu</span>
            </button>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li class="active"><a href="#">Directory</a></li>
                <li><a href="#">Food &amp; Drinks</a></li>
                <li><a href="#">Shops &amp; Services</a></li>
                <li><a href="#">Movies</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

CSS 代码:

.inline-div { display: inline-block; }
.responsive-menu { font-size: 20px; color: #000; }
.navbar {
    border: none;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border-radius: 0px;
    margin-bottom: 0px;
}
.navbar-default .navbar-toggle .icon-bar { background-color: black; }
.navbar-default .navbar-toggle { border-color: black; border-radius: 0px; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #ffffff; background-color: #F38C1E; }
.navbar-default { background-color: white; }
.navbar-default .navbar-nav>li>a { color: black; }
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

Answer 1

通过使用 Bootstrap 的类名，div 将应用 Bootstrap 的 JS，从而导致您希望避免的折叠功能。为了解决这个问题，我建议完全放弃 Bootstrap 的“导航栏”类系统并从头开始自己设计样式。然后您可以设置某种 jquery 来在导航栏中显示 div 直到某个点，此时您将显示“汉堡包”图标并隐藏导航栏的其余元素。这样的事情可以帮助您入门吗？

$(document).ready(function() {
    var ViewWidth = $(window).width();
    var DivWidth = 0;
    $("li").each(function() {
        var Width = $(this).width();
        DivWidth+=Width;
        if (DivWidth > ViewWidth){
            $("#HamburgerContainer").show()
            $(this).addClass("#Collapsed");
        }
    });
});

这显然还需要一些工作!足以让您入门吗？