1

我想在第一个<ul>项目上的 mouseenter 上动态显示下一个列表<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 回答