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>下拉列表?
如果是的话,我会在哪里放置所述帖子中显示的代码示例?
有大约数百个插件用于此目的...一个简单的搜索应该带来很多结果,如"50个jQuery插件下拉菜单"..
一些结果将向您展示如何构建自己的菜单,如" 使用CSS和jQuery构建下拉菜单 "
其他结果将为您提供一个插件,您只需调用一个jQuery函数将此UL转换为菜单,例如" 用于下拉菜单的jQuery插件 "
在这两种情况下,您都不需要精确地使用它们的显示方式,只需要感受一下这个想法,如果需要,可以根据自己的情况进行修改......
对于初学者,如果您是 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。