$(document).ready(function(){
??//頁面中的DOM已經裝載完成時，執行的代碼
??$(".main > a").click(function(){
????//找到主菜單項對應的子菜單項
????var ulNode = $(this).next("ul");
????/*
????if (ulNode.css("display") == "none") {
??????ulNode.css("display","block");
????} else {
??????ulNode.css("display","none");
????}
????*/
????//ulNode.show("slow");//normal fast
????//ulNode.hide();
????//ulNode.toggle();
????//
????//ulNode.slideDown("slow");
????//ulNode.slideUp;
????ulNode.slideToggle();
????changeIcon($(this));
??});
??$(".hmain").hover(function(){
????$(this).children("ul").slideDown();
????changeIcon($(this).children("a"));
??},function(){
????$(this).children("ul").slideUp();
????changeIcon($(this).children("a"));
??});
});

/**
* 修改主菜單的指示圖標
*/
function changeIcon(mainNode) {
??if (mainNode) {
????if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {
??????mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");
????} else {
??????mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");
????}
??}
}
? 其他HTML代碼見附件

轉載于:https://blog.51cto.com/woshicto/986851

總結

以上是生活随笔為你收集整理的JQUERY学习第二天之制作横纵向导航菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。