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 の準備ができている場所で実行されます。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 に答える