javascript 将无序列表变成下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9279842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make an unordered list into a drop down menu
提问by Jim
If I have this code showing on Wordpress, what is the easiest way to turn this into a jump menu?
如果我在 Wordpress 上显示此代码，将其转换为跳转菜单的最简单方法是什么？
<ul class='toc-odd level-1'>
<li><a href="1">It's finally here</a></li>
<li><a href="2">Improvements</a></li>
<li><a href="3">Handling</a></li>
</ul>
Can i use jquery like it showed in this thread: How to convert unordered list into nicely styled <select> dropdown using jquery?
我可以像在此线程中显示的那样使用 jquery：如何使用 jquery将无序列表转换为样式精美的 <select> 下拉列表？
and if so, where would i place the code examples shown in said post?
如果是这样，我会将上述帖子中显示的代码示例放在哪里？
回答by Praveen Vijayan
Check this one. Simplest one
检查这个。最简单的
HTML, CSS & jQuery
HTML、CSS 和 jQuery
回答by Rafael Verger
There's about hundreds of plugins with this purpose... A simple search should bring a lot of results like "50 jQuery plugins for dropdown menu"..
大约有数百个用于此目的的插件......一个简单的搜索应该会带来很多结果，比如“50 个用于下拉菜单的 jQuery 插件”......
Some results will show you how to build your own menu like this one "Build a dropdown menu with CSS and jQuery"
一些结果将向您展示如何构建自己的菜单，例如“使用 CSS 和 jQuery 构建下拉菜单”
Other results will give to you a plugin that you just need to call a jQuery function to transform this UL into a menu, like "jQuery plugin for dropdown menu"
其他结果会给你一个插件，你只需要调用一个 jQuery 函数来把这个 UL 转换成一个菜单，比如“下拉菜单的 jQuery 插件”
In both cases you don't need to use exactly how they show, just feel the idea and, if you need, modify to fit your case...
在这两种情况下，您都不需要完全使用它们的显示方式，只需感受一下这个想法，然后根据需要进行修改以适合您的情况......
回答by Ben Sewards
how about some jQuery :)
一些jQuery怎么样:)
For starters, if you're new to jQuery, you might have noticed that you can create inline jQuery using scripttags inside of your html web page, or you can create a separate .js file that is linked to your html file (preferred) using either a CDN (check it out here) or manually providing the script doc files yourself. I prefer using google's CDN because they have plenty of servers that are most likely closer to the client, and the client only has to load the scripts once through the CDN.
首先，如果您不熟悉 jQuery，您可能已经注意到您可以使用html 网页内的脚本标签创建内联 jQuery ，或者您可以创建一个单独的 .js 文件链接到您的 html 文件（首选）使用 CDN（在此处查看）或自己手动提供脚本文档文件。我更喜欢使用 google 的 CDN，因为他们有很多服务器很可能离客户端更近，而且客户端只需通过 CDN 加载一次脚本。
In your html, provide the script tags, and then start working with JS and jQuery!
在您的 html 中，提供脚本标签，然后开始使用 JS 和 jQuery！
<head>
<title>your webpage</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
//BELOW IS YOUR OWN SCRIPT FILE REFERENCE!
<script src="Scripts/Jscript1.js" type="text/javascript" ></script>
Also, if you would like the jQuery intellisense to work in the script file, all you have to do is add a reference link in the script file you are using!
此外，如果您希望 jQuery 智能感知在脚本文件中工作，您所要做的就是在您正在使用的脚本文件中添加一个参考链接！
/// <reference path="jquery-1.7.1-vsdoc.js" />
$(document).ready(function () {
$('.toc-odd level-1').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
});
The above jQuery example is just 1 way out of millions that you could implement to render your code. If you have interest in learning a fast and concise library, then check out the learn jQuery in 30 days.
上面的 jQuery 示例只是您可以实现以呈现代码的数百万种方法中的一种。如果您有兴趣学习快速简洁的库，那么请查看30 天学习 jQuery。
Best of luck, Ben
祝你好运，本
