[英]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.