学习JavaScript并像HP网站一样进行导航

Question

请指导我。预先感谢。

我正在学习JavaScript，并希望像HP网站一样进行导航。我不想复制所有这些，但是我只是想像悬停在悬停的那样打开/关闭子导航。

因此，在这里我编写代码，在此代码中，我无法像悬停时那样打开导航。请引导我，再次感谢。您可以在Codepen Alse上进行现场检查。

$(function () {
    var mainNav = $('.main-nav')
    ,   targetMainNavlistItems = mainNav.find('li[rel]')
    , timerForShowSubNav
    , timerForHideSubNav
    targetMainNavlistItems.each(function () {
        var relAttr = $(this).attr('rel');
        $(this).on({
            'mouseenter' : function () {
                clearTimeout(timerForHideSubNav);
                timerForShowSubNav =  setTimeout(showSubNav, 500);
                $('#' + relAttr).fadeIn(200);
            },
            'mouseleave' : function () {
                clearTimeout(timerForShowSubNav);
                timerForHideSubNav = setTimeout(hideSubNav, 500);
                $('#' + relAttr).fadeOut(200);
            }
        });
    });
    function showSubNav() {
        $('.sub-nav').addClass('is-showing');
    };
    function hideSubNav() {
        $('.sub-nav').removeClass('is-showing');
    };
});

html

<header>
    <div class="header-container">
        <nav class="main-nav">
            <ul>
                <li rel="sub-home">
                    <a href="#">Home</a>    
                </li>
                <li rel="sub-about">
                    <a href="#">About</a>    
                </li>
                <li rel="sub-link1">
                    <a href="#">Link-1</a>    
                </li>
                <li rel="sub-link2">
                    <a href="#">Link-2</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </nav> <!--end main-nav-->
        <nav class="sub-nav">
            <ul id="sub-home">
                <li><a href="#">Home Sub Links</a></li>
                <li><a href="#">Home Sub Links</a></li>
                <li><a href="#">Home Sub Links</a></li>
                <li><a href="#">Home Sub Links</a></li>
            </ul>
            <ul id="sub-about">
                <li><a href="#">About Sub Links</a></li>
                <li><a href="#">About Sub Links</a></li>
                <li><a href="#">About Sub Links</a></li>
                <li><a href="#">About Sub Links</a></li>
            </ul>
            <ul id="sub-link1">
                <li><a href="#">Link1 Sub Links</a></li>
                <li><a href="#">Link1 Sub Links</a></li>
                <li><a href="#">Link1 Sub Links</a></li>
                <li><a href="#">Link1 Sub Links</a></li>
            </ul>
             <ul id="sub-link2">
                <li><a href="#">Link2 Sub Links</a></li>
                <li><a href="#">Link2 Sub Links</a></li>
                <li><a href="#">Link2 Sub Links</a></li>
                <li><a href="#">Link2 Sub Links</a></li>
            </ul>
        </nav><!-- end sub-nav-->
    </div><!--end header-container-->
</header>

CSS

 *{
    margin: 0;
    padding: 0;
}
body{
    background: #eee;
    font-family: roboto;
    letter-spacing: 1px;
}
a{
    color: #531;
    text-decoration: none;
}
.header-container{
    margin: 0 100px auto;
}
.main-nav ul{
    display: flex;
    border-bottom: 1px solid #ddd;
}
.main-nav a{
    padding: 20px 40px;
    display: block;
}
.sub-nav{
    height: 0;
    overflow: hidden;
    background: #ddd;
    transition: height 300ms ease;
}
.sub-nav.is-showing{
    height: 150px;
}
.sub-nav ul{
    padding: 30px;
    display: none;
}

Answer 1

$(function () {
    var mainNav = $('.main-nav')
    ,   targetMainNavlistItems = mainNav.find('li[rel]')
    , timerForShowSubNav
    , timerForHideSubNav
    
    targetMainNavlistItems.each(function () {
        var relAttr = $(this).attr('rel');
        $(this).on({
            'mouseenter' : function () {
                clearTimeout(timerForHideSubNav);
                timerForShowSubNav =  setTimeout(showSubNav, 500);
                $('#' + relAttr).fadeIn(200);
            },
        });
        $('.content').on({
            'mouseenter' : function () {
                clearTimeout(timerForHideSubNav);
                timerForShowSubNav =  setTimeout(hideSubNav, 500);
                $('#' + relAttr).fadeIn(200);
            }
        });
    });
    function showSubNav() {
        $('.sub-nav').addClass('is-showing');
    };
    function hideSubNav() {
        $('.sub-nav').removeClass('is-showing');
    };
});

* {
    margin: 0;
    padding: 0;
}
body {
    background: #eee;
    font-family: roboto;
    letter-spacing: 1px;
}
a{
    color: #531;
    text-decoration: none;
}
.content{
height = 500px;
}
.header-container {
    margin: 0 100px auto;
}
.main-nav ul {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.main-nav a {
    padding: 20px 40px;
    display: block;
}
.sub-nav {
    height: 0;
    overflow: hidden;
    background: #ddd;
    transition: height 300ms ease;
}
.sub-nav.is-showing {
    height: 150px;
}
.sub-nav ul {
    padding: 30px;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div class="header-container">
        <nav class="main-nav">
            <ul>
                <li rel="sub-home">
                    <a href="#">Home</a>    
                </li>
                <li rel="sub-about">
                    <a href="#">About</a>    
                </li>
                <li rel="sub-link1">
                    <a href="#">Link-1</a>    
                </li>
                <li rel="sub-link2">
                    <a href="#">Link-2</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </nav> <!--end main-nav-->
        <nav class="sub-nav">
            <ul id="sub-home">
                <li><a href="#">Home Sub Links</a></li>
                <li><a href="#">Home Sub Links</a></li>
                <li><a href="#">Home Sub Links</a></li>
                <li><a href="#">Home Sub Links</a></li>
            </ul>
            <ul id="sub-about">
                <li><a href="#">About Sub Links</a></li>
                <li><a href="#">About Sub Links</a></li>
                <li><a href="#">About Sub Links</a></li>
                <li><a href="#">About Sub Links</a></li>
            </ul>
            <ul id="sub-link1">
                <li><a href="#">Link1 Sub Links</a></li>
                <li><a href="#">Link1 Sub Links</a></li>
                <li><a href="#">Link1 Sub Links</a></li>
                <li><a href="#">Link1 Sub Links</a></li>
            </ul>
             <ul id="sub-link2">
                <li><a href="#">Link2 Sub Links</a></li>
                <li><a href="#">Link2 Sub Links</a></li>
                <li><a href="#">Link2 Sub Links</a></li>
                <li><a href="#">Link2 Sub Links</a></li>
            </ul>
        </nav><!-- end sub-nav-->
    </div><!--end header-container-->
</header>
<div class='content'>
some content
</div>