jquery - 模仿 Bootstrap 菜单功能

Question

你好，我有一个问题，我需要一些指导/帮助来创建一个菜单，如果屏幕太小而无法显示原始菜单，该菜单将替换为一个按钮。我知道 Bootstrap 会为您做这件事，但由于实现限制，我无法使用该库。因此，我查看了 Bootstrap 的功能并尝试模仿，但我仍然需要一些帮助来完成它。

我有以下 HTML 代码:

<div class="navbar navbar-default main-nav">
    <div class="container">
        <div class="navbar-header" tabindex="-1">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-nav" aria-expanded="false">
              <span class="sr-only">Mobile navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" tabindex="-1">
            <div class="nav navbar-nav" tabindex="-1">
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="home_button not_active" href="#"></a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">My data</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a href="#">Menu 1</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">Submenu1</a>
                        <a href="#">Submenu2</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="active" href="#">Menu 2</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">submenu1</a>
                        <a href="#">submenu2</a>
                    </div>
                </div>
                <a href="#">FAQ</a>
                <a href="#">Contact</a>
                <a href="#">Logout</a></div>
        </div>
    </div>
</div>

可以在这里看到:JSFIDDLE .现在，无论何时调整屏幕大小时，都会出现一个按钮，无论何时单击它，菜单都会垂直创建，而不是水平创建。

这很完美，但是当我将屏幕调整为大屏幕尺寸(我使用媒体查询)并且我想将当前的垂直实现重置为原始水平实现时我必须做什么。

正如我之前所说，我使用媒体查询来显示/隐藏按钮:

/* Media Queries */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
    .navbar {
        border-radius: 0;
    }
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-header {
        float: left;
    }
    .navbar-toggle {
        display: none;
    }
    .container>.navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

}

Answer 1

首先，这是一种糟糕的创建菜单的方式。

但这里有一个修复方法，为 max-width:

添加另一个 @media 查询

@media (max-width:768px) {
.show-menu .navbar-nav a, .show-menu .menuitem_wrapper {
  width:100%;
}
  .show-menu {
        display: block !important;
}
}

编辑:同时将 addClass 更改为 toggleClass -

$(".navbar-collapse").toggleClass('show-menu');