将鼠标悬停在关闭主菜单并进入子视图时停止关闭

时间:2018-06-05 02:15:42

标签: jquery html css menu hover

当主导航中的链接悬停时,我有一个subnav淡入和subnav动画的全宽背景。如何在将主导航停留在子导航栏上时保持子导航打开。当您未在主菜单项上时,子窗体将关闭。

                <nav class="header-menu menu">
                <ul>
                    <li class="menu-item-has-children">
                        <a href="#">
                            <span class="nav-text">Expertise</span>
                            <span class="icon-down-arrow-small "></span>
                        </a>

                        <ul class="sub-menu">
                            <li><a href="">Meet our Team</a></li>
                            <li><a href="">Contact Us</a></li>
                            <li><a href="">Our Process</a></li>
                        </ul>

                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">
                            <span class="nav-text">Projects</span>
                            <span class="icon-down-arrow-small "></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a href="">Meet our Team</a></li>
                            <li><a href="">Contact Us</a></li>
                            <li><a href="">Our Process</a></li>
                            <li><a href="">Our Process</a></li>
                            <li><a href="">Our Process</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Insights</a>
                    </li>
                    <li>
                        <a href="#">Careers</a>
                    </li>
                </ul>
            </nav>
  $(".nav-text").mouseenter(function(){

                var that = this;
                var subNavHeight = $(that).parent().siblings('.sub-menu').outerHeight();

                $(that).parent().parent().siblings().children('.sub-menu').stop().animate({opacity: 0}, 100);// fade out all sub-menus


                $('.menu-expand').stop().animate({height:subNavHeight},200, "linear", function(){
                    $(that).parent().siblings('.sub-menu').stop().animate({opacity: 1}, 200);



                });

            });

enter image description here

0 个答案:

没有答案