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;
}

responsive.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元素中添加了另一个类，并将display隐藏到它而不是隐藏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

，请按照以下教程链接

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

1 个答案: