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

Jim*_*Jim 6 javascript css wordpress jquery

如果我在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>
Run Code Online (Sandbox Code Playgroud)

我可以像在这个帖子中看到的那样使用jquery:如何使用jquery 将无序列表转换为格式良好的<select>下拉列表?

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

Pra*_*yan 9

检查一下.最简单的一个

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

HTML,CSS和jQuery


Raf*_*ger 7

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

一些结果将向您展示如何构建自己的菜单,如" 使用CSS和jQuery构建下拉菜单 "

其他结果将为您提供一个插件,您只需调用一个jQuery函数将此UL转换为菜单,例如" 用于下拉菜单的jQuery插件 "

在这两种情况下,您都不需要精确地使用它们的显示方式,只需要感受一下这个想法,如果需要,可以根据自己的情况进行修改......


Ben*_*rds 3

对于初学者,如果您是 jQuery 新手,您可能已经注意到,您可以使用HTML 网页内的脚本标记创建内联 jQuery,或者您可以创建链接到 HTML 文件的单独 .js 文件(首选)使用 CDN(在此处查看)或自己手动提供脚本文档文件。我更喜欢使用 Google 的 CDN,因为他们拥有大量很可能更靠近客户端的服务器,并且客户端只需通过 CDN 加载脚本一次。

在 HTML 中,提供脚本标签,然后开始使用 JavaScript 和 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>
Run Code Online (Sandbox Code Playgroud)

另外,如果您希望 jQuery IntelliSense 在脚本文件中工作,您所要做的就是在您正在使用的脚本文件中添加一个参考链接!

/// <reference path="jquery-1.7.1-vsdoc.js" />
Run Code Online (Sandbox Code Playgroud)
$(document).ready(function () { 
     
    $('.toc-odd level-1').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);
 
        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );
     
});
Run Code Online (Sandbox Code Playgroud)

上面的 jQuery 示例只是您可以用来呈现代码的数百万种方法中的一种。如果您有兴趣学习快速而简洁的库,请查看30 天学习 jQuery。