如何用jquery瞄准<ul>中的下一个<ul>列表项？答案

【问题标题】：How to aim at the next <ul> list item in an <ul> with jquery?如何用jquery瞄准<ul>中的下一个<ul>列表项？
【发布时间】：2013-08-15 07:27:07
【问题描述】：

我想在第一个 <li> 项目上的 mouseenter 上动态显示下一个 <ul> 列表项目。脚本的第一部分按预期工作，即第一个列表中下一个列表项的动画。但是我没有显示下一个<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>

【问题讨论】：

尝试使用.find()而不是.next()。
谢谢，试过了，还是不行。
我复制了你的代码并创建了一个fiddle，它在那里工作。
@RichardA 谢谢，太棒了。不过很有趣，因为我也想为这个问题做一个小提琴，但它根本不起作用。 ;)
可能是因为您的一些设置错误。请记住，您必须设置 jQuery 版本和正确的换行。（如您所见，我在 No Wrap - 在 中设置了我的。）

标签： jquery dom next

【解决方案1】：

我认为您要做的是将下一个 li 移动到更右侧，然后显示当前 li 内的 ul

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

演示：Fiddle

【讨论】：

谢谢阿伦，太棒了。但是看看下面我的 cmets，与我的相比，我不知道你的功能来自哪里。或者看看理查德的小提琴。我刚刚复制了你的代码，很奇怪，它有效。唯一的区别是变量$li的设置。

【解决方案2】：

所讨论的<ul> 不是兄弟，而是<li> 的子

更换

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

与

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

应该这样做。

【讨论】：

谢谢，它正在工作，但是现在新的列表项显示在 mouseenter 上新的<ul>所在的“上一个”列表项上？！？
@dollarvar 这似乎是 CSS 问题，而不是 jQuery 问题。
我的意思是阿伦的小提琴。
@dollarvar 他在mouseleave上隐藏了它，我没有。 Arun还在动画之前保存了对li元素的引用，我没有。所以忽略我的小提琴，因为 Arun 的作品更好一点。以那个为例。
@RichardA 问题是，我无法将 Arun 小提琴的功能复制到我的脚本中。当鼠标进入“Kosten”时，它显示“Referenzen”的ul。这很奇怪。你能看到吗？