Question

我创建了导航，效果很好。但是当我使用转换<li>时，我不知道究竟是什么，但当我将li项目和鼠标悬停在它上面时，那么ul sibling无法正常工作。

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（少）

*{
    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指定了转换以定位'所有'属性。由于您没有为顶部和左侧指定初始值，这意味着在悬停时这些值将尝试从auto（默认值）转换为100％和0，这是无效的，从而导致突然跳转。

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

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

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

但与此同时，定位不透明度会让您获得比所有更好的性能，并且如果您将来添加更多属性，则可以防止任何其他副作用。如果是我，我会实施两种解决方案。

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

使用li转换时的奇怪行为

1 个答案: