jQuery關(guān)于點(diǎn)擊菜單項(xiàng)，使子條目"向上"展開效果的實(shí)現(xiàn)

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

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出渭城免費(fèi)做網(wǎng)站回饋大家。

功能展示鏈接 http://runjs.cn/detail/v6i9g6g0

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

最近呢又開始接著繼續(xù)學(xué)習(xí)jQuery的東西，學(xué)到animate動(dòng)畫的時(shí)候，自己就在想，是不是可以用來實(shí)現(xiàn)一下這個(gè)功能呢（這個(gè)真是個(gè)心結(jié)啊~~）？然后就試著寫了一下，經(jīng)過一番波折，不僅讓我對(duì)animate的使用更加了解之外，也讓我了解了一個(gè)用jQuery的小技巧，更重要的是，實(shí)現(xiàn)這個(gè)功能。

下面上代碼并做出解析：

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>

文檔結(jié)構(gòu)是這樣子的，大家可以看到menu這個(gè)主菜單的菜單項(xiàng)的順序與子菜單的實(shí)際順序是一致的。這個(gè)是為點(diǎn)擊菜單項(xiàng)上的條目通過位置查找對(duì)應(yīng)子項(xiàng)做的一個(gè)設(shè)計(jì)。

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"
                    })//為菜單項(xiàng)添加樣式
                    .each(function () {//對(duì)每個(gè)菜單項(xiàng)進(jìn)行遍歷
                        $(this).click(function () {//添加click事件
                            var Ind = $("div.menu").children().index(this);//找出當(dāng)前點(diǎn)擊的菜單項(xiàng)是菜單div中的第幾個(gè)span
                            var FocusEle = $("div:eq(" + Ind + ")");//將選中菜單項(xiàng)的子項(xiàng)設(shè)成一個(gè)變量
                            if ($("div[class*='up']").size() == 0) {//說明是第一次加載，初次的時(shí)候?yàn)闆]選中任何菜單項(xiàng)的狀態(tài)，所以u(píng)p的個(gè)數(shù)為0
                                FocusEle.animate(
                                {
                                    top: $(this).height() - 10//使對(duì)應(yīng)的子項(xiàng)向上移動(dòng)
                                },
                                'normal',//中速移動(dòng)
                                function () {
                                    $(this).addClass("up");//移動(dòng)完之后為這個(gè)子項(xiàng)加上up的樣式
                                });
                            } else {//如果不是初次加載
                                $("div[class*='up']").animate(//找到正在顯示的菜單子項(xiàng)
                                {
                                    top: $(this).height() + 10//使對(duì)應(yīng)子項(xiàng)向下移動(dòng)
                                },
                                'normal',
                                function () {
                                    $(this).removeClass("up");//移除這個(gè)子項(xiàng)的up樣式
                                    FocusEle.animate(//一
                                    {
                                        top: $(this).height() - 10//將重新選中的菜單子項(xiàng)向上移動(dòng)
                                    },
                                    '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，即菜單子項(xiàng)
                    var Index = $("div").index(this);
                    var Left = $("div.menu span:eq(" + Index + ")").position().left + 200;//修改不同子項(xiàng)的橫坐標(biāo)，使其與菜單項(xiàng)的條目一致
                    $(this).css({ "top": $(this).height() + $(this).position().top,
                        "left": Left,
                        "color": "white",
                        "position": "absolute"
                    })//為菜單子項(xiàng)添加樣式
                    .children().css({
                        "background-color": "SlateGrey",
                        "border": "black solid thin",
                        "cursor": "pointer"
                    }).hover(function () {
                        $(this).css("color", "red");
                    }, function () {
                        $(this).css("color", "white");
                    });
                }
            })
        });

上面的代碼幾乎是逐條注釋的，大家應(yīng)該都能看懂，主要的實(shí)現(xiàn)思想我還是說一下，大家再結(jié)合著注釋看就OK了，大家會(huì)發(fā)現(xiàn)實(shí)現(xiàn)這個(gè)功能的時(shí)候完全沒有顯示（show（）），隱藏（hide()）的操作，最開始我也是一個(gè)思維誤區(qū)，以為必須要用顯示，隱藏去實(shí)現(xiàn)，但做著做著發(fā)現(xiàn)了一個(gè)非常傻的問題，展開的效果實(shí)現(xiàn)上是通過移動(dòng)隱藏和顯示來實(shí)現(xiàn)的。怎么說呢，大家想想看完電影之后演員名單那部分的東西就能有個(gè)概念了。

這里有兩點(diǎn)很重要：

1、這5個(gè)div全部為absolute形式的，因?yàn)橹挥羞@樣才能進(jìn)行相對(duì)移動(dòng)

2、所謂的消失，實(shí)際上是4個(gè)子項(xiàng)的div被menu div也遮擋住了，所以這里要知道，我給menu div加了背景色，即白色。

說到這大家應(yīng)該就知道是如何實(shí)現(xiàn)的了吧？

另外在說一 下 注釋中”特別說明”的那部分，其實(shí)這部分代碼與它上面不遠(yuǎn)處的【一】的代碼是一樣的，只是前面加了.queue這么東西，這是做什么的呢？就是將多個(gè)動(dòng)畫放到一個(gè)隊(duì)列里，然后依據(jù)隊(duì)列的次序，一個(gè)一個(gè)的展現(xiàn)出來。我的初衷就是，如果當(dāng)前有子項(xiàng)是展開狀態(tài)的，那么就“先”把其關(guān)閉，“后”把新點(diǎn)擊的子項(xiàng)展開。

不過不知道為什么，如果是二次進(jìn)行了點(diǎn)擊的子項(xiàng)，就不會(huì)再經(jīng)過queue 中animate結(jié)束時(shí)那個(gè)function了。這個(gè)有明白為什么的朋友可以幫忙解答一下。然而像我【一】中這個(gè)實(shí)現(xiàn)，也是合乎規(guī)則的。

其實(shí)這個(gè)小功能還有點(diǎn)弊端，就是如果點(diǎn)擊過快，大家會(huì)發(fā)現(xiàn)同時(shí)展開多項(xiàng)子菜單，原因是動(dòng)畫的過程是需要時(shí)間的，而在這段時(shí)間里我沒有禁止click事件。應(yīng)該是用指派命名空間的方法就可以搞定。大家可以研究研究然后告訴我。

最后總結(jié)了一下，寫這個(gè)小功能有點(diǎn)慚愧的說寫了挺長(zhǎng)時(shí)間，中間換了好多方法為解決一些問題，現(xiàn)在看來，這么簡(jiǎn)單的東西為什么會(huì)寫這么久，還是因?yàn)樽铋_始的時(shí)候沒有想好，邊寫邊想花費(fèi)了許多時(shí)間。以后要改進(jìn)這種做事方法。

新浪微博：http://weibo.com/zhouhongyu1989 歡迎圍觀~！

新聞名稱：jQuery關(guān)于點(diǎn)擊菜單項(xiàng)，使子條目"向上"展開效果的實(shí)現(xiàn)
文章出自：http://www.muchs.cn/article32/phoppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)