Question

下面你看到我的HTML代码。由于css规则下拉菜单类，所有div都被隐藏。例如，当我将i悬停在具有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();
    });
});

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

非常感谢任何想法！

Answer 1

您无法在HTML页面中多次使用相同的ID。

div

ul

li

试试这种方式。

＆＃13;

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

＆＃13;

.dropdown-menu{
display:none;
}

＆＃13;

<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>

＆＃13;

Answer 2

我的不好，误读了这个问题。

试试这个：

$('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>

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

2 个答案: