jQuery 關於點選選單項，使子條目

為什麼做了這樣一個的功能呢？原因是前一段時間jQuery群裡有個朋友想實現這樣一個東東，大家都知道jQuery中有現成的slideDown和slideUp方法，但那是向下展開，而這個是一個完全相反的效果。

功能展示連結

其實這樣一個功能也蠻奇怪的，感覺不是很實用，但是當時也沒有一下子做出來，試著寫了一會兒覺得不能馬上寫完就say sorry了。

最近呢又開始接著繼續學習jQuery的東西，學到animate動畫的時候，自己就在想，是不是可以用來實現一下這個功能呢（這個真是個心結啊~~）？然後就試著寫了一下，經過一番波折，不僅讓我對animate的使用更加了解之外，也讓我瞭解了一個用jQuery的小技巧，更重要的是，實現這個功能。

下面上程式碼並做出解析：

Html部分：

    <div>        <span>Item1.1</span>        <span>Item1.2</span>        <span>Item1.3</span>        <span>Item1.4</span>    </div>    <div>        <span>Item2.1</span>        <span>Item2.2</span>        <span>Item2.3</span>        <span>Item2.4</span>    </div>    <div>        <span>Item3.1</span>        <span>Item3.2</span>    </div>    <div>        <span>Item4.1</span>        <span>Item4.2</span>    </div>    <div class="menu">        <span>Item1</span>        <span>Item2</span>        <span>Item3</span>        <span>Item4</span>    </div>

文件結構是這樣子的，大家可以看到menu這個主選單的選單項的順序與子選單的實際順序是一致的。這個是為點選選單項上的條目透過位置查詢對應子項做的一個設計。

jQuery部分：

        $(function () {            $("div").each(function () {//遍歷所有div元素                if ($(this).is("[class='menu']")) {//如果是選單所在的div                    $(this).css({ "top": $(this).height() + $(this).position().top,                        "position": "absolute",                        "color": "white",                        "background-color": "white",                        "width": "500px",                        "left": "200px"                    })//為選單新增樣式                    .children("span").css({ "background-color": "DimGrey",                        "border": "black solid thin"                    })//為選單項新增樣式                    .each(function () {//對每個選單項進行遍歷                        $(this).click(function () {//新增click事件                            var Ind = $("div.menu").children().index(this);//找出當前點選的選單項是選單div中的第幾個span                            var FocusEle = $("div:eq(" + Ind + ")");//將選中選單項的子項設成一個變數                            if ($("div[class*='up']").size() == 0) {//說明是第一次載入，初次的時候為沒選中任何選單項的狀態，所以up的個數為0                                FocusEle.animate(                                {                                    top: $(this).height() - 10//使對應的子項向上移動                                },                                'normal',//中速移動                                function () {                                    $(this).addClass("up");//移動完之後為這個子項加上up的樣式                                });                            } else {//如果不是初次載入                                $("div[class*='up']").animate(//找到正在顯示的選單子項                                {                                    top: $(this).height() + 10//使對應子項向下移動                                },                                'normal',                                function () {                                    $(this).removeClass("up");//移除這個子項的up樣式                                    FocusEle.animate(//一                                    {                                        top: $(this).height() - 10//將重新選中的選單子項向上移動                                    },                                    'normal',                                    function () {                                        $(this).addClass("up");//新增up樣式                                    });                                })                                //***************************特別說明**********************//                                .queue(function () {二//                                    FocusEle.animate(//                                    {//                                        top: $(this).height() - 10//                                    },//                                    'slow',//                                    function () {//                                        $(this).addClass("up");//                                    });//                                });                            }                        }).css("cursor", "pointer").hover(function () {                            $(this).css("color", "red");                        }, function () {                            $(this).css("color", "white");                        })                    });                }                else {//如果不是選單所在的div，即選單子項                    var Index = $("div").index(this);                    var Left = $("div.menu span:eq(" + Index + ")").position().left + 200;//修改不同子項的橫座標，使其與選單項的條目一致                    $(this).css({ "top": $(this).height() + $(this).position().top,                        "left": Left,                        "color": "white",                        "position": "absolute"                    })//為選單子項新增樣式                    .children().css({                        "background-color": "SlateGrey",                        "border": "black solid thin",                        "cursor": "pointer"                    }).hover(function () {                        $(this).css("color", "red");                    }, function () {                        $(this).css("color", "white");                    });                }            })        });

上面的程式碼幾乎是逐條註釋的，大家應該都能看懂，主要的實現思想我還是說一下，大家再結合著註釋看就OK了，大家會發現實現這個功能的時候完全沒有顯示（show（）），隱藏（hide()）的操作，最開始我也是一個思維誤區，以為必須要用顯示，隱藏去實現，但做著做著發現了一個非常傻的問題，展開的效果實現上是透過移動隱藏和顯示來實現的。怎麼說呢，大家想想看完電影之後演員名單那部分的東西就能有個概念了。

這裡有兩點很重要：

1、這5個div全部為absolute形式的，因為只有這樣才能進行相對移動

2、所謂的消失，實際上是4個子項的div被menu div也遮擋住了，所以這裡要知道，我給menu div加了背景色，即白色。

說到這大家應該就知道是如何實現的了吧？

另外在說一 下 註釋中”特別說明”的那部分，其實這部分程式碼與它上面不遠處的【一】的程式碼是一樣的，只是前面加了.queue這麼東西，這是做什麼的呢？就是將多個動畫放到一個佇列裡，然後依據佇列的次序，一個一個的展現出來。我的初衷就是，如果當前有子項是展開狀態的，那麼就“先”把其關閉，“後”把新點選的子項展開。

不過不知道為什麼，如果是二次進行了點選的子項，就不會再經過queue 中animate結束時那個function了。這個有明白為什麼的朋友可以幫忙解答一下。然而像我【一】中這個實現，也是合乎規則的。

其實這個小功能還有點弊端，就是如果點選過快，大家會發現同時展開多項子選單，原因是動畫的過程是需要時間的，而在這段時間裡我沒有禁止click事件。應該是用指派名稱空間的方法就可以搞定。大家可以研究研究然後告訴我。

最後總結了一下，寫這個小功能有點慚愧的說寫了挺長時間，中間換了好多方法為解決一些問題，現在看來，這麼簡單的東西為什麼會寫這麼久，還是因為最開始的時候沒有想好，邊寫邊想花費了許多時間。以後要改進這種做事方法。