1

我有一个简单的代码，它允许我在两个 div 之间切换，它们是两个子导航的包装（#sub-nav-wrap 是替代导航）。它们固定在浏览器的底部：

$(function(){
$('.button').click(function(){
    $('#sub-nav-wrapmin').toggle();
    $('#sub-nav-wrap').toggle();
});

});

我希望做的是保持每个 div 的状态与用户在页面刷新后选择的状态相同，即使单击新的子标题菜单也将保持不变，而不是诉诸默认状态。

html是这样的：

<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->

<div id="sub-nav-wrapmin" class="snWrap divone">
        <div id="sn-contentmin">
            <div id="sn-likemin"></div> 
            <div id="sn-coffeesml"></div>
            <div id="sn-sharemin"></div>
            <div id="sn-commentsml"></div>
            <div id="toggle-barmin">
                    <div id="sn-sidebrdrmin"></div>
                    <div class="sn-toggle button"></div>
           </div>
              <ul class="sn-comicsmin menu">
                <li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
                <li><a class="sn-archive" href="#archive.html">Archive</a></li>
                <li><a class="sn-vote" href="#vote.html">Vote</a></li>
                <li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
            </ul>
      </div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
    <div id="sub-nav-container">
         <div id="sub-nav-content">

                <div id="sn-bnrlft"></div>
                <div id="sn-bnrrgt"></div>
                <div class="sn-dividelft"></div>
                <div class="sn-dividergt"></div>
                <div id="sn-likebg"></div>
                <div id="sn-coffeebtn">
                </div>
                <div id="sn-sharebtn"></div>
                <div id="sn-commentbtn"></div>    
                <div id="toggle-bar">
                    <div id="sn-sidebrdr"></div>
                    <div class="toggle button"></div>
                </div>            
        </div>
        <div id="sub-nav-brdr">
            <ul class="sub-nav-comics menu">
                <li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
                <li><a class="archive" href="#archive.html">Archive</a></li>
                <li><a class="vote" href="#vote.html">Vote</a></li>
                <li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
            </ul>
        </div>
    </div>
</div>

CSS是这样的：

#sub-nav-wrap {
    display: none;  
}

这是我第一次问，我一直在绞尽脑汁想用这个网站上的其他类似代码让它工作，但没有任何效果。将不胜感激任何帮助...

大卫

我构建了一个jsFiddle来展示在没有 cookie 的情况下导航是如何工作的。 这是我使用 cookie 的尝试。我希望这是简单的事情，我只是想念理解......

4

2 回答 2

1

我注意到的一件事是 jQuery.cookie 不存在于小提琴中，但我认为无论如何你在实际站点上都有它。给你。我相信有更有效的方法，但这仍然有效。

于 2012-07-28T22:59:52.573 回答
1

您需要 jQuery cookie插件才能在 jQuery 中以这种方式使用 cookie。jQuery 中没有对您正在尝试做的事情的原生支持。

如果旧浏览器不是问题，您可以使用本地存储并执行以下操作：

$(function(){
    var wrapmin = localStorage.getItem('wrapmin')||false,
        wrap = localStorage.getItem('wrap')||false;

    if (wrapmin) $('#sub-nav-wrapmin').show();
    if (wrap) $('#sub-nav-wrap').show();

    $('.button').click(function(){
        $('#sub-nav-wrapmin').toggle();
        $('#sub-nav-wrap').toggle();
        wrapmin = $('#sub-nav-wrapmin').is(':visible');
        wrap = $('#sub-nav-wrap').is(':visible');
        localStorage.setItem('wrapmin', wrapmin),
        localStorage.setItem('wrap', wrap);
    });    
});

您还需要更改 CSS，如果最初显示元素，它现在将无法正常工作。

小提琴

cookie 插件有据可查。你通过给它一个名字和一个值来设置一个cookie，即。两个值，而不是一个：

$.cookie('the_cookie', 'the_value');
于 2012-07-28T18:58:20.803 回答