2

ナビゲーションに jQuery トグル関数を使用しています。デフォルトでは、作成者のトグルが表示され、アーカイブのトグルは閉じられています。

http://jsfiddle.net/TeDFs/4/

私の問題は、ユーザーが別のページに切り替えると、トグルがリセットされることです。

たとえば、ユーザーが Authors トグルを閉じて Archive トグルを開いて別のページに移動すると、デフォルト設定が読み込まれます。

Cookie を介して設定を保存することは可能だと読みましたが、私は jQuery をまったく初めて使用するので、誰かが私を助けてくれるとうれしいです!

HTML

<div id="authors" class="widget">
<h2 class="widget-title-visible">Authors</h2>
<div class="toggle">
    <div class="submenu">
        <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 3</li>
        </ul>
    </div>
</div>


<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle hidden">
    <div class="submenu">       
        <ul>
            <li>November 2012</li>
            <li>Oktober 2012</li>
        </ul>
    </div>
</div>
</div>​

jQuery

function toggleWidgets() {
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title-visible').addClass('minus'); 

    jQuery('.widget-title').click(function() {
        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });

    jQuery('.widget-title-visible').click(function() {
        $(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
    });
} 

jQuery(document).ready(function() {
    toggleWidgets();
} )​

CSS

.hidden{
    display:none;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}

</p>

4

1 に答える 1

2 
function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}


function readCookie(name) {
    var nameEq = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEq) == 0)
            return c.substring(nameEq.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

クッキーを読み書きする関数は次のとおりです。必要に応じて設定を維持できます:)

両方の div の可視性を切り替えたい場合は、div の「id」を Cookie 名として使用し、Cookie に「true」または「false」を表示するかどうかを保存します。

divをクリックすると、その「id」と可視性を取得し、

var divId = $(this).attr("id");
var visible = false;
if($(this).isVisible())
    visible = true;

createCookie(divId, visible, 1);

そして、ページをリロードすると

var visibleAuthors = readCookie("authors");
var visibleArchives = readCookie("archives")

ページの読み込み時に Cookie の結果を解析し、必要な div も表示します

于 2012-11-03T23:01:44.030 に答える