[英]List items show / hide different and separate div with jQuery
從問題中可以看出,我對jQuery和這種類型的編碼不是很好。
我正在構建一個megamenu,菜單項之一應顯示如下圖所示的div: https ://pasteboard.co/H2zzoDs.jpg
正如您在我的小提琴https://codepen.io/byte37/pen/YYLmNq中所看到的那樣,我無法顯示懸停在li元素上的相應Div。
我想要實現的是,當我將鼠標懸停在列表元素(li)之一上時,我想顯示相應的Div。
<div class="cbi-main-menu">
<div class="row">
<div class="col-md-3">
<div class="cbi-menu-sidebar">
<h3 class="menu-item-prime">Menu</h3>
<ul id="menu-left" class="no-style">
<li><a id="lnk1" href="#" class="menu-item-1" >Link 1</a></li>
<li><a id="lnk2" href="#" class="menu-item-2">Link 2</a></li>
<li><a id="lnk3" href="#" class="menu-item-3">Link 3</a></li>
<li><a id="lnk4" href="#" class="menu-item-4">Link 4</a></li>
<li><a id="lnk5" href="#" class="menu-item-5">Link 5</a></li>
<li><a id="lnk6" href="#" class="menu-item-6">Link 6</a></li>
<li><a id="lnk7" href="#" class="menu-item-7">Link 7</a></li>
<li><a id="lnk8" href="#" class="menu-item-8">Link 8</a></li>
<li><a id="lnk9" href="#" class="menu-item-9">Link 9</a></li>
<li><a id="lnk10" href="#" class="menu-item-10">Link 10</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="link-show container-menu" id="item-1"><img src="http://via.placeholder.com/350x150" id="item-1">Link1</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-2">Link2</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-3">Link3</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-4">Link4</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-5">Link5</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-6">Link6</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-7">Link7</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-8">Link8</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-9">Link9</div>
<div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-10">Link10</div>
</div>
</div>
</div>
JS:
$('#menu-left li').hover(
function() {
$(this).closest('.container-menu').find('.link-show').show();
},
function() {
$(this).closest('.container-menu').find('.link-show').hide();
});
額外的問題:由於我要顯示/隱藏的div的內容主要是由圖片制成的,是否只有在<li>元素上懸停時才可以加載內容? 而不是僅將鼠標懸停在<li>上時加載所有內容並顯示內容?
謝謝!
您可以為每個li元素添加一個數據菜單,其中包含要顯示的菜單的ID,如下所示:
<li data-menu="item-1"><a id="lnk1" href="#" class="menu-item-1" >Link 1</a></li>
然后,您應該向要顯示的div添加一個id屬性,就像您對第一個屬性所做的一樣:
<div class="link-show container-menu" id="item-1"> <img src="http://via.placeholder.com/350x150" id="item-1">Link1 </div>
通過這種方式鏈接兩個項目,您可以擁有一個簡單的處理程序來懸停li元素,例如:
$('#menu-left li').hover( function() { $("#" + $(this).data("menu")).show(); }, function() { $("#" + $(this).data("menu")).hide(); } );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.