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

Question

下面是我的 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>

我已经用下面的代码成功了：

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

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

任何想法都非常感谢！

Answer 1

我的错，误读了这个问题。

试试这个：

$('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();
});
});

然后改变你的 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>

Answer 2

1. 您不能在 HTML 页面中多次使用同一个 ID。
2. div 内的 ul 标记也不是有效的 HTML。所以，把它放在li标签里面。

试试这个方法。

$('ul.nav li').each(function() {
     $(this).hover(function() {
         var myid=$(this).attr("id");
         $(this).find("div").show();
    });
});

.dropdown-menu{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="dropdown" id="0"><a href="#">menu1</a>
<div class="dropdown-menu">content 1</div>
</li>
<li class="dropdown"><a href="#">menu2</a>
<div class="dropdown-menu">content 2</div>
</li>
<li class="dropdown" id="2"><a href="#">menu3</a>
<div class="dropdown-menu">content 3</div>
</li>
</ul>