Javascript 鼠标悬停在侧边栏上时如何显示子菜单栏？

如何在鼠标悬停时在侧边栏上显示子菜单栏，并在鼠标离开时关闭？有人能帮我解决这个问题吗？我是使用jquery的新手

JS代码不工作

$(function(){
    $('.nav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

HTML

css:



问候提摩太
使用纯CSS您可以实现同样的效果

 .nav li ul{display:none;}
 .nav li:hover ul{display:block;}

您的选择器错误
您正在选择

#nav

这将选择具有
id=“nav”

试用

#sidebar > .nav

使用
class=“nav”
选择元素（但仅限于侧边栏的直接子元素）

或者，使用CSS
像这样的

ul.nav li ul {
  height: 0px;
  transition: height 500ms;
  background-color: red;
  overflow: hidden;
}

ul.nav li:hover ul {
  height: 200px;
}

当然，您可以通过CSS实现这一点，但如果您想让javascript正常工作：

$('#sidebar > .nav > li').hover(function () {
    $(this).find('.nav').show(500);
}, function () {
    $(this).find('.nav').hide(500);
});

这可以通过纯css转换实现，不需要JS。你能帮我吗？我对使用CSSY不太熟悉如果你的意思是类的话，你没有带
id=“nav”
的元素，那么就改用
.nav
吧。我已经改变了，但仍然不起作用。我尝试了你的代码，它起作用了，但现在显示了子菜单。这都是空白，它在鼠标上工作，但是。它是隐藏我的子菜单。这一个也在工作，与@Suresh Ponnukalai的CSS示例相同，但是为什么它要隐藏我的子菜单？你不想你的子菜单只在其父菜单li悬停时才显示吗？你想让子菜单始终可见你的意思是？是的，你是正确的，我想在它悬停时显示我的子菜单，但我不知道我的代码出了什么问题。。当它悬停时，它显示子菜单，但没有内容。第一个内容是“添加帐户”和“更新用户”等等。你检查了演示还是复制到你的？如果是后者，则可能是一些额外的代码导致的。否则，尝试清空缓存或其他东西。是的，当鼠标悬停时，父对象的内容是空的，我不知道是什么原因导致了错误。但是如何清空缓存呢？我试试看
ul.nav li ul {
  height: 0px;
  transition: height 500ms;
  background-color: red;
  overflow: hidden;
}

ul.nav li:hover ul {
  height: 200px;
}

$('#sidebar > .nav > li').hover(function () {
    $(this).find('.nav').show(500);
}, function () {
    $(this).find('.nav').hide(500);
});