响应式导航栏在打开时关闭答案

【问题标题】：Responsive navigation bar closes when opened响应式导航栏在打开时关闭
【发布时间】：2014-11-04 05:01:04
【问题描述】：

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

菜单 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','');
        });

    });
});

【问题讨论】：

它工作正常。在这里查看jsfiddle.net/3ckc2etz/1
@VinitaRathore 谢谢

标签： jquery html css responsive-design navigation

【解决方案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

【讨论】：