Question

我正在尝试创建菜单，该菜单在点击父元素时打开，并且从刚刚打开的那个上关闭mouseleave。它应该从左到右工作

这是

    <ul class="menuFirst">
        <li><img src="img/ico1.png"></li>
            <ul class="">
                <li><img src="img/ico2.png" alt="submoduł1"></li>
                <li><img src="img/ico2.png" alt="submoduł2"></li>
                <li><img src="img/ico2.png" alt="submoduł3"></li>
            </ul>
        <li><img src="img/ico1.png"></li>
            <ul class="menuSecond">
                <li><img src="img/ico2.png" alt="submoduł1"></li>
                <li><img src="img/ico2.png" alt="submoduł2"></li>
                <li><img src="img/ico2.png" alt="submoduł3"></li>
            </ul>
        <li><img src="img/ico1.png"></li>
            <ul class="menuSecond">
                <li><img src="img/ico2.png" alt="submoduł1"></li>
                <li><img src="img/ico2.png" alt="submoduł2"></li>
                <li><img src="img/ico2.png" alt="submoduł3"></li>
            </ul>
    </ul>

这是CSS

ul.menuFirst{
    list-style-type: none;
border-top: #AAA solid 3px;
border-right: #AAA solid 3px;
border-bottom: #AAA solid 2px;
position: absolute;
left: 0px;
top: 70px;}
    ul.menuFirst li{
    background: #DDD;
    border-bottom: #AAA solid 1px;
}
ul.menuFirst li img{
margin:5px;
}
ul.menuFirst ul{
display: none;
}
    ul.menuFirst ul.menuSecond {
list-style: none;
display: table;
position: absolute;
left: 30px;
    }
    ul.menuFirst ul.menuSecond li{
display: table-cell;
    }

这是jQuery

<script>
$(document).ready(function(){
    $("ul.menuFirst li").click(function(){
        $(this).next().toggle();            
        var ypos= $(this).next().position();
        alert(ypos.top);
        $(this).next().css('top','-=38');

        $('ul.menuFirst ul.menuSecond').one('mouseleave',function(){
        $(this).css('top', '+=38').toggle();
    });
    });
});

它适用于第一个元素，但它很漂亮。当我试图添加.animate（）它只是没有用。所以我决定退后一步，解开这个，但我不知道怎么做。它应该是这样的： Finished menu

Answer 1

您的HTML使用不正确

<ul class="menuFirst">
    <li><img src="img/ico1.png">
        <ul class="">
            <li><img src="img/ico2.png" alt="submodul1"></li>
            <li><img src="img/ico2.png" alt="submodul2"></li>
            <li><img src="img/ico2.png" alt="submodul3"></li>
        </ul>
    </li>
    <li><img src="img/ico1.png">
        <ul class="menuSecond">
            <li><img src="img/ico2.png" alt="submodul1"></li>
            <li><img src="img/ico2.png" alt="submodul2"></li>
            <li><img src="img/ico2.png" alt="submodul3"></li>
    </ul>
        </li>
    <li><img src="img/ico1.png">
        <ul class="menuSecond">
            <li><img src="img/ico2.png" alt="submodul1"></li>
            <li><img src="img/ico2.png" alt="submodul2"></li>
            <li><img src="img/ico2.png" alt="submodul3"></li>
        </ul>
    </li>
</ul>

Answer 2

好的，我已经解决了......

    $('ul.menuFirst ul').each(function(){
        $(this).css('top', '-=38').hide();
    });

这是在DOM准备好的地方执行我每次打开或关闭它时都不需要改变位置。

        $("ul.menuFirst li").click(function(){
        $(this).next().toggle("slide", 
                 {direction: "left"})
        });

        $('ul.menuFirst ul.menuSecond').mouseleave(function(){
        $(this).hide("slide", 
                 {direction: "left"});

接下来，我正在使用它来制作动画。

jQuery子菜单位置错误

2 个答案: