[英]Nested Ul LI hover hide show element jquery
在嵌套的ul li中,我需要在li hover上显示编辑和更新链接。 我有为我做的jQuery代码。 当我从上到下遍历时,jQuery工作正常,但是当我从下到上遍历时,它无法按需工作,并显示了父li的隐藏div。
我只想显示悬停李的跨度。 这是必需的。
<ul id="tree">
<li><span>Mobile </span> <span class="links" style="display: none;">Hey Hi, YOu
caught me!!!</span>
<ul class="subItem">
<li><span>GSM Mobiles </span> <span class="links" style="display: none;">Hey Hi,
YOu caught me!!!</span> </li>
<li><span>Smart Mobiles </span> <span class="links" style="display: none;">Hey
Hi, YOu caught me!!!</span>
<ul class="subItem">
<li><span>Android Mobiles </span> <span class="links" style="display: none;">Hey
Hi, YOu caught me!!!</span> </li>
<li><span>Sabian Mobiles </span> <span class="links" style="display: none;">Hey
Hi, YOu caught me!!!</span> </li>
</ul>
</li>
<li><span>Dual SIM Mobiles </span> <span class="links" style="display: none;">
Hey Hi, YOu caught me!!!</span> </li>
</ul>
</li>
<li><span>Watches </span> <span class="links" style="display: none;">Hey Hi, YOu
caught me!!!</span>
<ul class="subItem">
<li><span>Chronograph Watches </span> <span class="links" style="display: none;">
Hey Hi, YOu caught me!!!</span> </li>
<li><span>Water Resistance </span> <span class="links" style="display: none;">
Hey Hi, YOu caught me!!!</span> </li>
</ul>
</li>
</ul>
我的jQuery代码在这里:
$('ul li').hover(function () {
$("ul>li>span.links").hide();
$(this).find("span.links").first().show();
}, function () {
$("ul>li>span.links").hide();
$(this).find("span.links").first().hide();
});
这是 jsFiddle 链接
当打印出$(this)时,我注意到,您同时选择了内部列表和外部列表,在选择器中更具体:
$('#tree ul li').hover(function () {
$("ul>li>span.links").hide();
$(this).find("span.links").first().show();
}, function () {
$("ul>li>span.links").hide();
$(this).find("span.links").first().hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.