jquery - 响应式导航栏在打开时关闭

Question

所以很久以前我做了一个网站，现在想在其中加入一个响应式菜单。问题是，当我单击菜单栏时，它会打开，但会在显示整个列表后立即关闭。

HTML 菜单:

<!-- start menu -->
 <div id="menu" class="fix-fish-menu">
    <ul id="nav" class="sf-menu">
        <li><a href="home.php">Home</a></li>
        <li><a href="contact_list.php">Contacts</a></li>
        <li><a href="showrooms_list.php">Showrooms</a></li>
        <li><a href="services_list.php">Services</a></li>
        <li><a href="bookmarks.php">Bookmarks</a></li>
        <li><a href="gallery.php">Fashion 101</a></li>
        <li><a href="logout.php">Logout</a></li>
    </ul>  <!-- end #nav  -->
    <div class="menu-trigger">
        MODASearch <span>The Fashion Directory</span> <i class="fa fa-bars "></i>
    </div>
</div>  <!-- end #menu  -->

CSS:

.menu-trigger{
    background-color: #39414c;
    height: 40px;
    width: 100%;
    display:none;
    color:#fff;
    padding:10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    clear:both;
    font-size:18px;
    font-family: 'PT Sans Narrow', sans-serif;
}
.menu-trigger span{ 
    font-size:12px; 
}
.menu-trigger i{
    font-size:18px;
    float:right;
}

响应.css:

@media only screen and (max-width : 768px) {
    .menu-trigger{display:block;}
    #nav {display:none; }
    .nav-expanded{display:block;}
}

链接的 JS:

jQuery(document).ready(function() {
    jQuery(".menu-trigger").click(function() {
        jQuery("#nav").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('overflow','');
        });

    });
});

Answer 1

解决了它，实际上有一些帮助，但问题是类不能以这种方式覆盖 ID 规则，所以内容会在 jQuery 动画完成后立即重置为不显示。

所以在这种情况下，我向#nav 元素添加了另一个类，并将显示设置为隐藏而不是隐藏 id。现在工作正常。抱歉之前从未使用过 jsfiddle，否则我也会在那里发布答案。特别感谢 Brad Schiff 为我指明了正确的方向。

代码现在是这样的:

 <div id="menu" class="fix-fish-menu">
    <ul id="nav" class="sf-menu my-menu">
        <li><a href="home.php">Home</a></li>
        <li><a href="contact_list.php">Contacts</a></li>
        <li><a href="showrooms_list.php">Showrooms</a></li>
        <li><a href="services_list.php">Services</a></li>
        <li><a href="bookmarks.php">Bookmarks</a></li>
        <li><a href="gallery.php">Fashion 101</a></li>
        <li><a href="logout.php">Logout</a></li>
    </ul>  <!-- end #nav  -->
    <div class="menu-trigger">MODASearch <span>The Fashion Directory</span> <i class="fa fa-bars "></i></div>
</div>  <!-- end #menu  -->
<div class="clear"></div>

响应式 CSS:

.menu-trigger{display:block;}
.my-menu {display:none; }
.nav-expanded{display:block;}

JS:

jQuery(document).ready(function() {

    jQuery(".menu-trigger").click(function() {

        jQuery(".my-menu").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display','');
        });

    });

});

如果有人感兴趣，请点击以下教程链接tutorial