Question

在我的网站上，导航中有一个下拉菜单，在移动浏览器上我希望这个下拉列表能够自动扩展（基本上作为父元素）。目前我已将其设置为使得下拉列表中有一个隐藏在移动设备上的类，然后我复制了下拉列表并为其添加了一个类，以便它们仅在移动设备上显示并隐藏在桌面上。

我想知道是否有更简单的方法可以在不重复HTML代码的情况下执行此操作。这是我目前的代码，让您了解我正在尝试做什么：

<ul id="mobileMenu">

    <li><a href="index.php">Home</a></li>
    <li><a href="/beer">Beer</a></li>
    <li><a href="/events">Events</a></li>
    <li class="dropdown">
        <a href="#" data-dropdown="connectmenu">Connect</a>
        <ul id="connectmenu" class="f-dropdown" data-dropdown-content>
            <li><a href="/join">Join us</a></li>
            <li><a href="/news">News</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/volunteer">Volunteer</a></li>
            <li><a href="/donate">Donate</a></li>
        </ul>
    </li>

    <li class="mobile-only"><a href="/join">Join us</a></li>
    <li class="mobile-only"><a href="/news">News</a></li>
    <li class="mobile-only"><a href="/blog">Blog</a></li>
    <li class="mobile-only"><a href="/volunteer">Volunteer</a></li>
    <li class="mobile-only"><a href="/donate">Donate</a></li>

</ul>

和Javascript：

function display_menu() {
    if (jQuery(window).width()<768) {
        jQuery(".mobile-only").show();
        jQuery(".dropdown").hide();

    } else {
        jQuery("#mobileMenuRight").show();
        jQuery(".mobile-only").hide();
        jQuery(".dropdown").show();

    }
}
jQuery(window).resize(function() {
    display_menu();
});
jQuery(document).ready(function() {
    display_menu();
});

提前致谢！

如何让child li元素成为移动浏览器的父元素？

0 个答案: