如果我在 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 吗:如何使用 jquery 将无序列表转换为样式精美的 下拉列表? https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery
如果是这样,我将在哪里放置上述帖子中显示的代码示例?
对于初学者来说,如果您是 jQuery 新手,您可能已经注意到可以使用以下命令创建内联 jQueryscriptHTML 网页内的标签,或者您可以使用 CDN (在这里查看 http://code.google.com/apis/libraries/devguide.html)或自己手动提供脚本文档文件。我更喜欢使用 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>
另外,如果您希望 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 示例只是您可以用来呈现代码的数百万种方法中的一种。如果您有兴趣学习快速而简洁的库,请查看30 天学会 jQuery。 http://net.tutsplus.com/articles/news/learn-jquery-in-30-days/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)