Javascript 如何防止激活停用移动按钮后导航消失？

这是一个很难回答的问题，但我会尽我所能：

如果转到并调整窗口大小（如果您使用的是台式机/笔记本电脑），直到汉堡菜单图标出现，然后单击它以获得下拉菜单，再次单击它以隐藏它。你会发现，当你调整窗口的全宽时，原来的导航就消失了

我很好奇如何才能准确地防止这种情况发生。我精通HTML和CSS，但对Javascript非常陌生

我使用的Javascript是：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function ($) {

    /* prepend menu icon */
    $('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');

    /* toggle nav */
    $("#mobile_menu").on("click", function () {
        $("#menu_border_wrapper").slideToggle();
        $(this).toggleClass("active");
    });

});

    });
</script>

jQuery（文档）.ready（函数（$）{
/*前置菜单图标*/
$（“#菜单_包装”）。前置（“”）；
/*切换导航*/
$（“移动菜单”）。在（“单击”，功能（）{
$（“#菜单#边框#包装”）.slideToggle（）；
$（此）.toggleClass（“活动”）；
});
});
});

菜单的HTML是

<div id="menu_wrapper">

        <!-- Begin logo -->

        <a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
            MATT SUKKAR
        </a>        

        <!-- End logo -->

        <!-- Begin main nav -->
        <div id="nav_wrapper">
            <div class="nav_wrapper_inner">
                <div id="menu_border_wrapper">
                    <div class="menu-home-container">
                        <ul id="main_menu" class="nav">
                            <li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
                                <a href="http://msukkar.tumblr.com" style="color: #ff0000">
                                    Blog
                                </a>
                            </li>
                            <li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
                                <a href="http://msukkar.com/contact/">
                                    Contact
                                </a>
                            </li>
                        </ul>
                    </div>                  

                    <select>
                        <option selected="selected" value="">
                            - Main Menu -
                        </option>
                        <option selected="selected" value="http://msukkar.tumblr.com">
                            Blog
                        </option>
                        <option value="http://msukkar.com/contact/">
                            Contact
                        </option>
                    </select>
                </div>
            </div>
        </div>

-主菜单-
博客
联系

我希望我对你们大家解释得足够好。提前感谢您的帮助，如果需要，我将尝试进一步澄清

这是你的问题：

$("#menu_border_wrapper").slideToggle();

当你点击汉堡时，它会显示和隐藏你的菜单

问题是，当您在桌面视图中时，整个菜单都包含在

#菜单(u border)包装中

，并按应有的方式显示。然后你调整到移动，点击汉堡。第一次单击时，

#菜单(u边框)包装器

向下滑动，您的菜单将可见。第二次单击时，

#菜单(u边框)包装器

向上滑动，菜单将不可见。这在手机上很好，因为汉堡包图标本身不包含在

#menu#u border_wrapper

中，但是当您将窗口调整回桌面时，菜单就消失了！请记住，在第二次单击时，菜单是如何向上滑动的，并被设置为

display:none

。现在，由于您的桌面大小菜单包含在

#菜单(u border)包装中

，因此它不再存在了

可能有很多方法可以解决这个问题。将实际的菜单按钮移到桌面上的

#菜单#边框(包装

）外，为手机和桌面制作两个完全不同的菜单，或将

#菜单#边框(包装

设置为

显示：阻止！重要信息

在桌面上

---

希望有帮助

嘿，马格纳斯，谢谢你站出来。我现在正在把你的建议付诸实践，我完全相信你的一个建议会很好地发挥作用。但是，如果您有时间，我想知道原始网站模板（）是如何完成这项任务而不出现故障的，您认为如何？如果这实际上是原始模板，它也不起作用。