javascript - jQuery 子菜单位置错误

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() 时，它只是不起作用。所以我决定退后一步，解决这个问题，但我不知道该怎么做。它应该看起来像这样:

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>