使用jquery操作Bootstrap导航栏元素

Question

我要做的是在调整大小时将导航栏中的#navbar { background-color: #913D88; color: #fff; font-size: 1.5em; } #navbar ul li { display: block; margin: 0; padding: 0; list-style: none; } #navbar ul li a:link, #navbar ul li a:visited { color: #fff; text-decoration: none; } #navbar ul li ul li { display: none; } 元素隐藏到下拉菜单中。

我试过了，我已经用这个错误的菜单结束了。 http://i.imgur.com/1uJ7hbG.gif

这是js：

<li>

这是html：

$().ready(function () {
    //we reconstruct menu on window.resize
    $(window).on("resize", function (e) {
        var parentWidth = $("#normal").parent().width() - 40;
        var ulWidth = $(".menutohide").outerWidth();
        var menuLi = $("#normal > li");
        var liForMoving = new Array();
        //take all elements that can't fit parent width to array
        menuLi.each(function () {
            ulWidth += $(this).outerWidth();
            if (ulWidth > parentWidth) {
                console.log(ulWidth);
                liForMoving.push($(this));
            }
        });
        if (liForMoving.length > 0) {   //if have any in array -> move em to "more" ul
            e.preventDefault();
            liForMoving.forEach(function (item) {
                item.clone().appendTo(".links-hidden");
                item.remove();
            });
        }
        else if (ulWidth < parentWidth) { //check if we can put some 'li' back to menu
            liForMoving = new Array();
            var moved = $(".links-hidden > li");
            for (var i = moved.length - 1; i >= 0; i--) { //reverse order
                var tmpLi = $(moved[i]).clone();
                tmpLi.appendTo($("#normal"));
                ulWidth += $(moved[i]).outerWidth();
                if (ulWidth < parentWidth) {
                    $(moved[i]).remove();
                }
                else {
                    ulWidth -= $(moved[i]).outerWidth();
                    tmpLi.remove();
                }
            }
        }
        if ($(".links-hidden > li").length > 0) { //if we have elements in extended menu - show it
            $(".menutohide").show();
        }
        else {
            $(".menutohide").hide();
        }
    });

    $(window).trigger("resize"); //call resize handler to build menu right
});

Answer 1

我认为您可以使用CSS @media查询完成此操作。只要提供你想隐藏某种id的内容，然后就可以使用display: none来隐藏它。

@media (max-width: 767px) {
    #contact-nav-link {
        display: none;
    }
}

这是JSFiddle - <li>元素，其中“联系人”将显示在导航栏中，但是当窗口调整大小（并且导航栏折叠）时，它会从下拉列表中消失。 / p>