我想在鼠标输入器上动态显示下一个<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>
2条答案
按热度按时间dldeef671#
我认为您要做的是将下一个
li移到更右边，然后显示当前li中的ul演示：Fiddle
vc9ivgsu2#
问题中的
<ul>不是“兄弟”，而是<li>的“子”更换
与
应该做。