javascript - 制作响应式导航显示的子菜单

Question

所以我试图在移动导航模式(小于 900 像素)下悬停时使我的导航子菜单下拉菜单。

在移动导航模式下，如何让我的子菜单项在悬停时显示？

非常感谢。

---

编辑: 需要澄清的是，仅针对屏幕上窗口的桌面大小的浏览器窗口大小，而不是实际的平板电脑功能悬停。

$(document).ready(function(){
        $("#nav-mobile").html($("#nav").html());
        $("#nav-trigger span").click(function(){
            if ($("#nav-mobile ul").hasClass("expanded")) {
                $("#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $(this).removeClass("open");
            } else {
                $("#nav-mobile ul").addClass("expanded").slideDown(250);
                $(this).addClass("open");
            }
        });
    });

/* RESPONSIVE */

#nav-trigger {
    display: none;
    text-align: center; 
}

#nav-trigger span {
    display: inline-block;
    padding: 10px 0 10px 0;
    background-color: #333;
    color: #FFF;
    cursor: pointer;
    text-transform: uppercase; 
    width: 100%;
}

/* Mobile Nav Triangle */
#nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 10px;
      content: "";
      border-left: solid 10px transparent;
      border-top: solid 10px #FFF;
      border-right: solid 10px transparent; 
}

/* Mobile Nav Triangle */
#nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #FFF;
      border-right: solid 10px transparent; 
}

#nav-trigger span:hover {
      background-color: #444; 
}

/*--------------------- NAV MOBILE ------------------*/

#nav-mobile {
    display: none; 
    position: relative;
    margin-bottom: 30px;
}

#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #333; 
}

#nav-mobile li {
    display: block;
    margin: 0 2px;
    border-top: solid 1px #CCC;
}

#nav-mobile li:last-child {
    border-top: solid 1px #CCC;
}

#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px;
    text-transform: uppercase;
}

#nav-mobile a:hover {
    background-color: #444;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}
/* RESPONSIVE */


#nav ul ul { 
    background: #333;
    display: none;
    max-width: 180px;
    position: absolute;
}

/* Dropdown Menu */
#nav ul ul li {
    display: block;
    font-size: 14px;
}

#nav {
    background: #222;
    border-top: 1px solid #444;
    height: 50px;
    letter-spacing: 1px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1000; /* To overlay content */
}

#nav ul {
    font-size: 0; /* Fixes colour hover to full button width */
}

#nav li {
    border-right: 1px solid #3f3f3f; /* Nav button divider */
    height: auto;
    width: 160px;  /* Nav button size */
}

/* Left Divider of Home Button */
.home {
    border-left: 1px solid #3f3f3f;
}

#nav ul li {    
    display: inline-block;
    font-size: 16px;
}

/* Hover Effect */
#nav ul li:hover { 
    background: #333;
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Removes Link Visited Colour */
#nav ul li a, visted { 
    color: #fafafa;
    display: block;
    padding: 15px;
    text-decoration: none;
}

/* Hover Effect */
#nav ul li a:hover { 
    color: #939393;
    text-decoration: none;
    transition: color 0.3s ease;
}

#nav ul li:hover ul {
    display: block;
}

/* Dropdown Menu */
#nav ul ul { 
    background: #333;
    display: none;
    max-width: 180px; /* Dropdown menu bg fill */
    position: absolute;
}

/* Dropdown Menu */
#nav ul ul li {
    display: block;
    font-size: 14px;
}

/* Dropdown Menu */
#nav ul ul li a:visited {
    color: #fafafa;
}

/* Dropdown Menu */
#nav ul ul li a:hover {
    background: #333;
    color: #939393;
    padding-right: 1px; /* Slide right effect */
    transition: all 0.3s ease;
}


/*--------------------------------------------
                MEDIA QUERIES
-------------------------------------------*/

@media all and (max-width: 900px) /* Original 900 */ {
    
    #nav-trigger {
      display: block; 
    }
    #nav {
        display: none; 
    }
    
    #nav-mobile {
        display: block; 
    } 
    #nav ul ul li:hover ul {
        display: block;
    }
    #nav ul ul { 
        background: #333;
        display: none;
        max-width: 180px; /* Dropdown menu bg fill */
        position: absolute;
}
    
    #nav ul ul li {
        display: block;
    }
    /* Dropdown Menu */
    #nav ul li a:hover ul {
        display: block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Start of Nav -->
        <div id="nav-trigger">
            <span>MENU</span>
        </div>

        <div id="nav">
            <ul>
                <li><a href="#">Link</a></li>
                <li>
                    <a href="#">Link</a>
                    <ul class="sub">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Link</a>
                    <ul class="sub">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Link</a>
                    <ul class="sub">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div> 
        
        <div id="nav-mobile"></div>
        <!-- End of Nav -->

Answer 1

根据您现在的代码，当鼠标悬停在其父列表项上时，这将显示您用 .sub 标记的菜单。

@media all and (max-width: 900px) /* Original 900 */ {
    #nav > ul > li:hover > ul {
        display:block;
    }
}

或

@media all and (max-width: 900px) /* Original 900 */ {
    #nav > ul > li:hover .sub {
        display:block;
    }
}