0

我正在尝试创建菜单，该菜单在单击父元素时打开并在鼠标离开时从不久前打开的那个菜单中关闭。它应该从左到右工作

这是

    <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() 它只是没有用。所以我决定退后一步，解除这个错误，但我不知道怎么做。它应该看起来像这样： 完成的菜单

4

2 回答 2

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>
于 2013-10-05T21:16:48.257 回答
0

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

    $('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"});

接下来我用它来制作动画。

于 2013-10-05T23:16:50.677 回答