close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
分享關於Photoshop教學|商品攝影|網頁教學|Wordpress教學|iPhone教學| Flash教學|jQuery教學...等 
jQuery教學－記憶型滑動式展開選單，換頁重整選單不收合
Dec 17th 2013, 01:30, by admin

梅問題－jQuery教學－記憶效果滑動式選單
　　一直以來有不少朋友，遇到這樣子的狀況，當透過jQuery製作出來的，滑動式展開選單，點選了其中的大項後，選單會自動展開，並且切到該類別的頁面外，但這時就會發現到，選單立即就回到原始的縮合狀態，其實這並不是jQuery的問題，而是瀏覽器動態變數的生命週期機制，因此若想要讓選單不收合時，就得透過cookie小餅乾，來將變數暫存在使用者的電腦中，這時就可完成換頁選單可繼續保留，原先所點選的設定值了，至於怎麼作現在就一塊來看看吧！
使用的素材：

1.jquery.js
2.jquery.cookie.js

CSS樣式：
放在<head>.....</head>之間：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 
#menu {
        width: 155px;
        background-color: #bce0de;
}
#menu dt {
        cursor: pointer;
}
#menu dd, #menu  ul {
        margin: 0;
        padding: 0;
}
#menu ul li {
        list-style: none;
}
#menu ul li a {
        text-decoration: none;
        color: #660;
}
#menu ul li a:hover {
        text-decoration: underline;
}
Javascript：
放在<head>.....</head>之間：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(function(){
        var _menu_id = $.cookie('menu_id');       
        $("#menu dt").click(function(){              
                //將選單索引值寫入cookie
                var _index = $("#menu dt").index(this);               
                $.cookie("menu_id", _index);            
 
                var _this = $(this);
                var _ans = $(this).next();
 
                if(_ans.is(":visible")){
                        _ans.slideUp();
                }else{
                        $("#menu dd").slideUp();
                        _ans.slideDown();
                }
        }).next().slideUp();
 
        //當cookie值不等於空時，就展開選單
        if($.cookie("menu_id")!=null){
                $("#menu dd").eq(_menu_id).slideDown();     
        }
 
        //清除cookie
        $("#c-cookie").click(function(){     
                $.cookie("menu_id", null);
        });
 
});
</script>
HTML：
放在<body>.....</body>之間：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
<dl id="menu">
<dt>選單一</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
        </ul>
    </dd>
 
<dt>選單二</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
            <li><a href="#">次選單二</a></li>
            <li><a href="#">次選單三</a></li>
        </ul>
    </dd>       
 
 <dt>選單三</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
            <li><a href="#">次選單二</a></li>
            <li><a href="#">次選單三</a></li>
        </ul>
    </dd>
</dl>
結果預覽：
梅問題－jQuery教學－記憶效果滑動式選單

當點了選單後，網頁已更換選單也不會縮回去，甚至重新整理頁面也是。
梅問題－jQuery教學－記憶效果滑動式選單

即便重整頁面，選單也會正常的開啟剛所點選的項目。
梅問題－jQuery教學－記憶效果滑動式選單

[範例預覽]　[範例下載]

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.
You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 xxxmkks 的頭像
    xxxmkks

    線上遊戲排行榜2013/2014,進擊的巨人線上看,candy crush saga外掛,正妹寫真三圍

    xxxmkks 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄