Question

我的下拉Navbar有问题，它不会一直这样做。但是，如果我重新加载页面并将光标放在标签上，它有时会开始闪烁并闪烁，而且悬停似乎搞得一团糟。

我已经制作了一个JSfiddle DEMO，但是下拉列表并未正确处理，我不知道为什么我还会提供代码和网页链接，下拉列表确实有效。

HTML

<div style="padding-top:15px;">

        <a class="toggleMenu" href="#">Menu</a> <!-- Mobile Nav -->
        <ul class="nav">

          <li>
            <a href="#">refresh and keep cursor here</a>
            <ul>
              <li>
                <a href="#">somthing</a>
                <ul>
                  <li><a href="#">Nothing</a></li>
                  <li><a href="#">Nothing</a></li>
                  <li><a href="#">Nothing</a></li>
                </ul>
              </li>
              <li>
                <a href="#">Nothing</a>
              </li>
              <li>
                <a href="#">Nothing</a>
              </li>
              <li>
                <a href="#">Nothing</a>
              </li>

            </ul>


          </li>
        </ul>
        </div> <!-- Container-Nav End -->

<div style="background:#333; width:100%; height:500px;"></div>

CSS

.nav-wrapper {
    max-width:1300px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.container-nav {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top:18px;
    padding-left: 20px;
}
.toggleMenu {
    display: none;
    background-color: #455357;
    width: 35%;
    padding: 15px 40px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    float: right;
    text-align: right;
}
.nav {
    list-style: none;
    *zoom: 1;
}
.nav:before, .nav:after {
    content:" ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    display: block;
    text-transform: uppercase;
    color: #788083;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.02em;
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}
.nav a:hover {
    color:#d54572;
    text-decoration: none;
}
/* first sub hover colors */
 .nav li a:hover {
    background: none;
}
/* second sub hover colors */
 .nav li li a:hover {
    background: #999;
}
/* active tab colors */
 #active {
    color:#d54572;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > a {
    display: block;
}
.nav li ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
/* first sub menu */
 .nav li li a {
    width: 127px;
    background: #666;
    color:#fff;
    position: relative;
    z-index:500;
    border: 1px inset #fff;
    display: block;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    margin-left:-40px;
}
/* second sub menu */
 .nav li li li a {
    background:#777;
    z-index:500;
}

的Javascript

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 801) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 801) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

使用光标在选项卡上重新加载页面时，导航下拉列表会悬停闪烁问题

0 个答案: