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

Question

这是一个棘手的问题，但我会尽力而为：

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

我很好奇如何才能完全防止这种情况发生。我擅长 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>

菜单的 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>

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

Answer 1

这是你的问题：

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

当您单击 汉堡包 时会显示和隐藏您的菜单。

问题在于，当您在桌面视图中时，您的整个菜单都包含在#menu_border_wrapper 中并按原样显示。然后您将大小调整为移动设备并单击汉堡包。在您第一次单击时，#menu_border_wrapper 会向下滑动，并且您的菜单变得可见。在您第二次单击时，#menu_border_wrapper 向上滑动，您的菜单变得不可见。这在移动设备上很好，因为汉堡包图标本身不包含在#menu_border_wrapper 中，但是当您将窗口大小调整回桌面时，菜单消失了！请记住第二次单击时菜单如何向上滑动并设置为display: none。现在好了，因为您的桌面尺寸菜单包含在内 #menu_border_wrapper，它不再存在了。

可能有很多方法可以解决这个问题。将实际的菜单按钮移到桌面上的#menu_border_wrapper 之外，为移动设备和桌面制作两个完全独特的菜单，或者在桌面上将#menu_border_wrapper 设置为display: block !important。

希望对你有帮助！