带有缩略图的Jquery下拉菜单

如何制作或使用类似这种类型的下拉菜单（下拉菜单中的小图像）的插件。

这实际上只是CSS，如果需要，您可以使用jQuery，但大多数请求都可以由CSS处理。您可能只想使用jQuery处理动画效果

所以我会这样做：

HTML:

JQuery

$(".nav li").on("click", function(){
   $( this ).children("ul").slideToggle(500);
});

您可能还希望通过定义图像宽度或高度或两者来约束图像大小，但这将是一个很好的起点。还要确保包含jQuery库。

@tombird sintax在ul标签的第二级上有一个错误。（应该是评论）

您还可以使用此插件自动执行以下操作：

---

它很容易使用。您只需向主ul标记添加一些类即可触发插件。阅读Doc.

@Jure-Ravlic-语法中没有错误，如果您查看代码，您会发现“.nav-li”应用了onclick侦听器，并且您的目标是“this”和“.nav-li”，然后是它的子级“ul”，它将显示子级ul，因此我不确定您所说的语法是否错误？你看了他的例子还是读了他的评论？你指给他看的插件没有达到他想要的效果？语法中没有错误。如果你看代码，你会发现“.nav li”有一个onclick侦听器应用于它，你的目标是“this”和“.nav li”，然后是它的子级“ul”，它将显示子级ul，所以我不确定你说的是什么错误的语法？你看了他的例子还是读了他的评论？你指给他看的插件没有达到他想要的效果？@tombird

没有结束标记。插件做到了这一点，他想要的是鼠标悬停而不是点击时的下拉菜单（关于这个例子）。这也是一个很好的解决方案，因为在这个插件中，鼠标悬停不会被缓存。这意味着，当你在一个菜单和另一个菜单上快速悬停十次时，悬停会被缓存并尝试执行十次，而在悬停插件中，它们只会执行一次。带有子菜单的示例位于右侧边栏的下方。第二个具有隐藏/显示效果，如他想要的@Preethu Alex

.nav ul ul { display: none; }
.nav img { float: left; }
.nav p { float: right; }

$(".nav li").on("click", function(){
   $( this ).children("ul").slideToggle(500);
});