html - 未折叠时自定义/格式化导航栏(navbar-collapse collapse in)。 MVC

Question

我在格式化 nav navbar-nav 无序列表中的列表项时遇到问题。当页面为全尺寸时，我想保留格式不变。但是，我想在页面缩小时格式化/自定义列表项，并且列表项“消失”并且仅在用户单击切换按钮后“重新出现”。

我试过使用 @media (max-width: 767px) 但它不起作用。

有人可以帮忙吗？

Answer 1

我最近做了类似的事情，但我使用了 jquery，创建了一个 cookie，如果关闭则将其设置为 0，打开则设置为 1，如下所示:

function toggleSideBar() {
$('#barsMenu').on("click", function () {
    $(this).toggleClass("closed");
    if ($(this).hasClass("closed")) {
        $.cookie('sideBarState', '0', { path: '/' });
    } else {
        $.cookie('sideBarState', '1', { path: '/' });
    }

if ($.cookie('sideBarState')==0) {
    $('#navigation').toggleClass("closed");
    $('#barsMenu').toggleClass("closed");
    $('.body-content').toggleClass("closed");
}
});