使用jQuery在懸停時動態顯示li
[英]Show li dynamically on hover using jquery
問題描述
懸停在“ category_name”類上時，我想顯示特定類別的特定產品。
例如，對於圓領T恤，它應該顯示圓領-半袖，對於V領T恤-V領-普通半袖，對於立領/ polo T恤-單行傾斜，但是當懸停在圓領T恤上時，它會顯示所有產品。
當我將鼠標懸停在其上時，應該顯示id為product_183的li。
如何解決呢？
下面是我的代碼：
<li class="navTab">
<a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_154" class="category_name">Round neck T-shirt (1)</a>
<ul class="tabInner">
<li id="product_183">
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=183" ><img src="http://192.168.1.156/dutees/image/cache/catalog/roundneck-270x300.jpg" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a>
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=183">Round Neck - Half Sleeve</a>
</li>
</ul>
</li>
<li class="navTab">
<a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_155" class="category_name">V- neck T-shirt (1)</a>
<ul class="tabInner">
<li id="product_184">
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=184" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a>
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=184">V Neck - Plain Half Sleeve</a>
</li>
</ul>
</li>
<li class="navTab">
<a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_156" class="category_name">Collar/Polo T-shirt (1)</a>
<ul class="tabInner">
<li id="product_185">
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=185" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a>
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=185">Single Line Tipping</a>
</li>
<!-- <li><a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143">More...</li> -->
</ul>
</li>
Juqery代碼，
$(".category_name").hover(function(){
//alert("coming");
$('#product_183').show();
$('#product_184').hide();
// alert(product_id);
});
3 個解決方案
解決方案1
1 2017-04-24 07:10:14
如果您只想顯示懸停的li項目，則可以嘗試以下操作：
$(".navTab").hover(function(){ $(this).find('ul').show(); $(this).siblings().find('ul').hide(); });
/**initially hide ul*/ .tabInner{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <li class="navTab"> <a href="#" class="category_name">Round neck T-shirt (1)</a> <ul class="tabInner"> <li id="product_183"> <a href="#" ><img src="" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a> <a href="#">Round Neck - Half Sleeve</a> </li> </ul> </li> <li class="navTab"> <a href="#" class="category_name">V- neck T-shirt (1)</a> <ul class="tabInner"> <li id="product_184"> <a href="#" ><img src="" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a> <a href="#">V Neck - Plain Half Sleeve</a> </li> </ul> </li> <li class="navTab"> <a href="#" class="category_name">Collar/Polo T-shirt (1)</a> <ul class="tabInner"> <li id="product_185"> <a href="#" ><img src="" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a> <a href="#">Single Line Tipping</a> </li> </ul> </li>
解決方案2
0 2017-04-24 07:07:00
通過以此替換ur html和jquery來嘗試此操作
$("#Round").hover(function(){ //alert("coming"); $('#product_183').show(); $('#product_184').hide(); $('#product_185').hide(); // alert(product_id); }); $("#Vneck").hover(function(){ //alert("coming"); $('#product_183').hide(); $('#product_184').show(); $('#product_185').hide(); // alert(product_id); }); $("#Collar").hover(function(){ //alert("coming"); $('#product_183').hide(); $('#product_184').hide(); $('#product_185').show(); // alert(product_id); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="navTab"> <a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_154" id="Round" class="category_name">Round neck T-shirt (1)</a> <ul class="tabInner"> <li id="product_183" style="display: none"> <a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=183" ><img src="http://192.168.1.156/dutees/image/cache/catalog/roundneck-270x300.jpg" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a> <a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=183">Round Neck - Half Sleeve</a> </li> </ul> </li> <li class="navTab"> <a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_155" id="Vneck" class="category_name">V- neck T-shirt (1)</a> <ul class="tabInner"> <li id="product_184" style="display: none"> <a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=184" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a> <a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=184">V Neck - Plain Half Sleeve</a> </li> </ul> </li> <li class="navTab"> <a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_156" id="Collar" class="category_name">Collar/Polo T-shirt (1)</a> <ul class="tabInner"> <li id="product_185" style="display: none"> <a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=185" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a> <a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=185">Single Line Tipping</a> </li> <!-- <li><a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143">More...</li> --> </ul> </li>
讓我知道結果
解決方案3
0 2017-04-24 07:12:21
另一個示例代碼...
jQuery代碼
$(".category_name").hover(function(){
var product_id = $(this).attr('product_id');
console.log('product_id : '+product_id);
if(product_id == 'product_183' ){
$('#product_183').show();
$('#product_184').hide();
$('#product_185').hide();
}
if(product_id == 'product_184' ){
$('#product_183').hide();
$('#product_184').show();
$('#product_185').hide();
}
if(product_id == 'product_185' ){
$('#product_183').hide();
$('#product_184').hide();
$('#product_185').show();
}
});
HTML代碼
<li class="navTab">
<a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_154" product_id='product_183' class="category_name">Round neck T-shirt (1)</a>
<ul class="tabInner">
<li id="product_183">
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=183" ><img src="http://192.168.1.156/dutees/image/cache/catalog/roundneck-270x300.jpg" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a>
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=183">Round Neck - Half Sleeve</a>
</li>
</ul>
</li>
<li class="navTab">
<a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_155" product_id='product_184' class="category_name">V- neck T-shirt (1)</a>
<ul class="tabInner">
<li id="product_184">
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=184" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a>
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=184">V Neck - Plain Half Sleeve</a>
</li>
</ul>
</li>
<li class="navTab">
<a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143_156" product_id='product_185' class="category_name">Collar/Polo T-shirt (1)</a>
<ul class="tabInner">
<li id="product_185">
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=185" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a>
<a href="http://192.168.1.156/dutees/index.php?route=product/product&path=&product_id=185">Single Line Tipping</a>
</li>
<!-- <li><a href="http://192.168.1.156/dutees/index.php?route=product/category&path=143">More...</li> -->
</ul>
</li>
使用jquery動態向li元素添加類
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.