Question

这是一个棘手的问题，但我会尽我所能：

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

我很好奇我怎么能完全阻止这一点。我擅长HTML＆amp; 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。

希望它有所帮助！

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

1 个答案: