Question

System.getProperty("java.version")

你好，在悬停li（id）元素时我想显示匹配的div（id） - 并悬停另一个li（错误的id）或离开ul我想隐藏div

我的方法是

<ul class="level0">
<li class="level1" id="cat2441"></li>
<li class="level1" id="cat2450"></li>
<li class="level1" id="cat2455"></li>
</ul>

<div class="alles-zwei" id="new-cat2441"></div>
<div class="alles-zwei" id="new-cat2450"></div>
<div class="alles-zwei" id="new-cat2455"></div>

Answer 1

你使用了错误的选择器。另外'"#new-' + this.id + '"'这种语法是错误的。没有必要在字符串中添加这些双引号。

＆＃13;

jQuery('.level0 li').hover(function() {
  var cat = '#new-' + this.id;
  jQuery(cat).show();
}, function() {
  var cat = '#new-' + this.id;
  jQuery(cat).hide();
});

＆＃13;

.alles-zwei {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="level0">
  <li class="level1" id="cat2441">cat2441</li>
  <li class="level1" id="cat2450">cat2450</li>
  <li class="level1" id="cat2455">cat2455</li>
</ul>

<div class="alles-zwei" id="new-cat2441">cat2441</div>
<div class="alles-zwei" id="new-cat2450">cat2450</div>
<div class="alles-zwei" id="new-cat2455">cat2455</div>

＆＃13;

Answer 2

你可以这样做，而不必依赖元素的id只使用两个元素的类。当您选择类时，它将作为数组返回，因此您可以将level1类数组与alles-zwei类数组进行匹配。它还可以简化您的HTML代码。

$('.level1').hover(function(){
    // Gets the index of the current li emement.
    var indx = $(this).index(); 

    // Gets the div element based on the hovered li and hides its siblings.
    $('.alles-zwei').eq(indx).show().siblings('div').hide();
});

jquery - on hover li width id - 显示匹配的id div

2 个答案: