Jquery 悬停时显示元素并隐藏其他元素

下面是我的html代码。由于css规则，下拉菜单类中的div都是隐藏的。例如，我将鼠标悬停在id为0的li上，然后显示id为0的div等

<ul class="nav">
<li class="dropdown" id="0"><a href="#">menu1</a></li>
<div class="dropdown-menu" id="0">content 1</div>
<li class="dropdown" id="1"><a href="#">menu2</a></li>
<div class="dropdown-menu" id="1">content 2</div>
<li class="dropdown" id="2"><a href="#">menu3</a></li>
<div class="dropdown-menu" id="2">content 3</div>
</ul>

但当我悬停到第三个li时，无论我在哪里悬停，我总是看到第三个div。这是一个我不知道如何解决的问题，第二个问题（假设前一个问题已解决）是，当我悬停到第一个li时，显示第一个div，那么我需要能够导航到该div，而不是立即消失

任何想法都非常感谢

在HTML页面中不能多次使用同一ID

div

内部

ul

标记也不是有效的HTML。所以，把它放在

li

标签中

这样试试

$（'ul.nav li'）。每个（函数（）{
$（this）.hover（函数（）{
var myid=$（this.attr（“id”）；
$（this.find（“div”）.show（）；
});
});
。下拉菜单{
显示：无；
}



内容1


内容2


内容3


在HTML页面中不能多次使用同一ID
div
内部
ul
标记也不是有效的HTML。所以，把它放在
li
标签中
这样试试


$（'ul.nav li'）。每个（函数（）{
$（this）.hover（函数（）{
var myid=$（this.attr（“id”）；
$（this.find（“div”）.show（）；
});
});
。下拉菜单{
显示：无；
}



内容1


内容2


内容3

我的错，误读了这个问题

试试这个：

$('ul.nav li').each(function() {
     $(this).mouseenter(function() {
         var myid=$(this).attr("id");
         $("#div"+myid).show();
    }).mouseleave(function() {
          var myid=$(this).attr("id");
         $("#div"+myid).hide();
});
});

并更改yout HTML：

<ul class="nav">
<li class="dropdown" id="0"><a href="#">menu1</a>
<div class="dropdown-menu" id="div0">content 1</div>
</li>

<li class="dropdown" id="1"><a href="#">menu2</a>
<div class="dropdown-menu" id="div1">content 2</div>
</li>

<li class="dropdown" id="2"><a href="#">menu3</a>
<div class="dropdown-menu" id="div2">content 3</div>
</li>

</ul>



内容1


内容2


内容3


我的错，误读了这个问题

试试这个：

$('ul.nav li').each(function() {
     $(this).mouseenter(function() {
         var myid=$(this).attr("id");
         $("#div"+myid).show();
    }).mouseleave(function() {
          var myid=$(this).attr("id");
         $("#div"+myid).hide();
});
});

并更改yout HTML：

<ul class="nav">
<li class="dropdown" id="0"><a href="#">menu1</a>
<div class="dropdown-menu" id="div0">content 1</div>
</li>

<li class="dropdown" id="1"><a href="#">menu2</a>
<div class="dropdown-menu" id="div1">content 2</div>
</li>

<li class="dropdown" id="2"><a href="#">menu3</a>
<div class="dropdown-menu" id="div2">content 3</div>
</li>

</ul>



内容1


内容2


内容3


您不应该对元素使用相同的id。它应该是独一无二的。试着这样做：你不应该在一个页面上多次使用相同的
ID
。您应该使用
类
或
数据
属性检查答案：您不应该对元素使用相同的id。它应该是独一无二的。试着这样做：你不应该在一个页面上多次使用相同的
ID
。您应该使用
类
或
数据
属性检查此答案：使用此解决方案，当我悬停在外时，显示的div将再次隐藏使用此解决方案，当我悬停在外时，显示的div将再次隐藏