1

<ul>最初の項目の上にマウスを入力すると、次のリスト項目を動的に表示したいと考えてい<li>ます。スクリプトの最初の部分 (最初のリストの次のリスト項目のアニメーション) は期待どおりに機能します。ただし、次の を表示する機能はありません<ul>。どんなヒントでも大いに役立ちます。

これまでの作業スクリプトはhttp://liebdich.biz/test/test.phpで確認できます。

ここにコードがあります

<head>
<style>
.masteringtext {
height:262px;
width:355px;
background:grey; 
overflow:hidden;
position:relative;
}

.masteringtext ul {
list-style:none;
padding:0;
margin:0;
cursor:pointer;
}

.masteringtext ul li {
display:inline-block;
background:#c3c3c3;
border:solid 1px black;
border-radius:5px;
padding:1px;
}

.overlay {
margin-left:-30px;
}

.profile {
position:absolute;
top:20px;
left:0;
top:25px;
display:none;
}
</style>

</head>

<body>
<div class="masteringtext">
<ul>
<li>Equipment</li>
    <li class="overlay">Kosten</li>
    <li class="overlay">Referenzen
        <ul class="profile">
            <li>Dies ist ein Test<br> um darzustellen was schon lange nötig war</li>
        </ul>
    </li>
    <li class="overlay">Ablauf einer Bestellung</li>
    <li class="overlay">Tips für Mixe</li>
    <li class="overlay">Faq</li>
</ul>


</body>

<script>
jQuery(document).ready(function(){
var overlay = $('li');


overlay.mouseenter(function() {
    $(this).next().animate({'margin-left':0},400, function() {
        $(this).next('ul').show();
    });
});

overlay.mouseleave(function() {
    $(this).next().animate({'margin-left':-30});
    });

});
</script>
4

2 に答える 2

0

<ul>問題のは兄弟ではなく、 の子です<li>

交換する

$(this).next('ul').show();

と

$(this).find('ul').show();

するべきです。

于 2013-08-15T07:30:13.807 に答える
0

あなたがやろうとしていることは、次liをさらに右に移動しul、現在の内側にあるを表示することだと思いますli

overlay.mouseenter(function() {
    var $li = $(this);
    $li.next().stop(true, true).animate({'margin-left':0},400, function() {
        $li.find('ul').show();
    });
});

overlay.mouseleave(function() {
    var $li = $(this);
    $li.next().stop(true, true).animate({'margin-left':-30}, function() {
        $li.find('ul').hide();
    });
});

デモ:フィドル

于 2013-08-15T07:30:52.400 に答える