使用 li 转换时的奇怪行为

Question

我创建了导航，它运行良好。但是当我使用转换<li> 时，我不知道具体是什么，但是当我将 li 项悬停并将鼠标移出时，ul 兄弟无法正常工作。

http://codepen.io/thehung1724/full/gmlfE/

HTML

<div class="container"> <a class="toggleMenu" href="#">Menu</a>

    <ul class="nav">
        <li>    <a href="#" class="parent">Shoes</a>

            <ul>
                <li>    <a href="#" class="parent">Womens</a>

                    <ul>
                        <li class=""><a href="#">Sandals</a>
                        </li>
                        <li><a href="#">Sneakers</a>
                        </li>
                        <li><a href="#">Wedges</a>
                        </li>
                        <li><a href="#">Heels</a>
                        </li>
                        <li><a href="#">Loafers</a>
                        </li>
                        <li><a href="#">Flats</a>
                        </li>
                    </ul>
                </li>
                <li>    <a href="#" class="parent">Mens</a>

                    <ul>
                        <li><a href="#">Loafers</a>
                        </li>
                        <li><a href="#">Sneakers</a>
                        </li>
                        <li><a href="#">Formal</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>    <a href="#" class="parent">Shirts</a>

            <ul>
                <li>    <a href="#" class="parent">Mens</a>

                    <ul>
                        <li><a href="#">T-Shirts</a>
                        </li>
                        <li><a href="#">Dress Shirts</a>
                        </li>
                        <li><a href="#">Tank Tops</a>
                        </li>
                    </ul>
                </li>
                <li>    <a href="#" class="parent">Womens</a>

                    <ul>
                        <li><a href="#">T-Shirts</a>
                        </li>
                        <li><a href="#">Blouses</a>
                        </li>
                        <li><a href="#">Dress Shirts</a>
                        </li>
                        <li><a href="#">Tunics</a>
                        </li>
                        <li><a href="#">Camisoles</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>    <a href="#">Shipping Info</a>

        </li>
    </ul>
</div>

CSS (LESS)

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a{
    color: #fff;
    text-decoration: none;
}

ul,
ol{
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    margin: 20px auto;
    width: 100%;
    max-width: 900px;
}

.toggleMenu{
    display: none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}

.nav{
    background: #175e4c;
    width: 100%;

    &:before, &:after{
        content: ""; 
        display: table;
    }

    &:after{
        clear: both;
    }

    > li{
        float: left;

        &.hover > ul{
            visibility: visible;
            opacity: 1;
        }
    }

    li{
        ul{
            visibility:hidden;
            opacity: 0;
            position: absolute;
            -webkit-transition: all 200ms ease-in-out;
            -moz-transition: all 200ms ease-in-out;
            -o-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;
        }

        li{
            a{
                background: #1d7a62;
                position: relative;
                z-index: 100;
                border-top: 1px solid #175e4c;
            }

            &.hover ul{
                visibility: visible;
                opacity: 1; 
                left: 100%;
                top: 0;
            }

            li a{
                background: #249578;
                z-index: 200;
                border-top: 1px solid #1d7a62;
            }
        }
    }

    ul{
        width: 9em;
        position: relative;
    }

    a{
        display: block;
        padding: 10px 15px;
    }
}

@media screen and (max-width: 768px) {
    .toggleMenu{
        width: 100%;
        text-align: center;
    }

    .active {
        display: block;
    }

    .nav{
        width: 100%;

        > li{
            border-top: 1px solid #104336;
            float: none;
        }

        > li.hover > ul , li li.hover ul{
            position: static;
        }

        .more{
            color: #fff;
            width: 20%;
            float: right;
            padding: 8px 15px;
            margin: 2px 0;
            text-align: center;
            cursor: pointer;
            z-index: 200;
            position: relative;
        }

        ul{
            display: block;
            width: 100%;
        }
    }
}

JS

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 < 768) {
    // if "more" link not in DOM, add it
    if (!$(".more")[0]) {
    $('<div class="more"><i class="fa fa-angle-down"></div>').insertBefore($('.parent')); 
    }
        $(".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');
    $(".nav li .more").unbind('click').bind('click', function() {

            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 768) {
    // remove .more link in desktop view
    $('.more').remove(); 
        $(".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');
        });
    }
}

Answer 1

我假设您在谈论向下钻取如何在淡入时出现在主下拉菜单下方，然后在它完全不透明时卡入到位，对吗？

原因是您已经为您的 uls 指定了针对“所有”属性的转换。由于您没有为 top 和 left 指定初始值，这意味着在悬停时，这些值将尝试从 auto（默认）转换为 100% 和 0，这是无效的，导致突然跳跃。

您可以通过两种方式修复它：将过渡限制为仅影响不透明度，或者为 ul 定义顶部和左侧，无论是否存在悬停类。

我个人更喜欢定义独立于悬停状态的静态属性：

.nav li li ul{
  left: 100%;
  top: 0;
}

但与此同时，定位不透明度将为您提供比所有更好的性能，并且如果您将来添加更多属性，它将防止任何额外的副作用。如果是我，我会实施这两种解决方案。

工作笔： http://codepen.io/anon/pen/hqEew