Question

如果我在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>

我是否可以使用此线程中显示的jquery：How to convert unordered list into nicely styled <select> dropdown using jquery?

如果是的话，我会在哪里放置所述帖子中显示的代码示例？

Answer 1

检查一下。最简单的一个

http://jsfiddle.net/Tpf7E/22/

HTML，CSS＆amp; jQuery

Answer 2

有大约数百个插件用于此目的...一个简单的搜索应该带来很多结果，如“下拉菜单的50个jQuery插件”..

某些结果会告诉您如何构建自己的菜单，例如“Build a dropdown menu with CSS and jQuery”

其他结果将为您提供一个插件，您只需调用jQuery函数将此UL转换为菜单，例如“jQuery plugin for dropdown menu”

在这两种情况下，您都不需要使用它们的确切显示方式，只需要感受一下这个想法，如果需要，可以修改以适应您的情况......

Answer 3

一些jQuery怎么样:)）

首先，如果您是jQuery的新手，您可能已经注意到可以使用html网页内的脚本标记创建内联jQuery，或者您可以创建单独的.js文件使用CDN（check it out here）链接到您的html文件（首选）或自己手动提供脚本doc文件。我更喜欢使用google的CDN，因为他们有很多服务器最有可能离客户端较近，而客户端只需要通过CDN加载一次脚本。

在你的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>

此外，如果您希望jQuery intellisense在脚本文件中工作，您所要做的就是在您正在使用的脚本文件中添加引用链接！

/// <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);         
    }
);

}）;

上面的jQuery示例只是您可以实现以呈现代码的数百万个中的一种。如果您有兴趣学习快速简洁的图书馆，请查看learn jQuery in 30 days.

祝你好运，本

在下拉菜单中创建一个无序列表

3 个答案: