在页面刷新视图jsFiddle后，使用cookie.js保持div上的切换状态 [英] Keep toggle state on divs using cookie.js after page refresh view jsFiddle

问题描述

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

$ $ $ $（$。$（$。$'$' ）.click（function（）{
$（'＃sub-nav-wrapmin'）。toggle（）;
$（'＃sub-nav-wrap'）。toggle（）;





$ p

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

html是这样的：

 <！ -  - 主分包装---> 
< div id =bottom-wrap> 
 <！ -  Mini Sub Nav  - > 
 
< div id =sub-nav-wrapminclass =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-comicsstyle =background-position：right tophref =＃comic.html>漫画< / a>< / li> 
< li>< a class =sn-archivehref =＃archive.html>存档< / a>< / li> 
< li>< a class =sn-votehref =＃vote.html> Vote< / a>< / li> 
< li>< a class =sn-spotlighthref =＃spotlight.html> Spotlight< / a>< / li> 
< / ul> 
< / div> 
< / div> 
<！ -  Sub Nav  - > 
< div id =sub-nav-wrapclass =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 =comicsstyle =background-position：right tophref =＃comic.html>漫画< / a>< / li> 
< li>< a class =archivehref =＃archive.html>存档< / a>< / li> 
< li>< a class =votehref =＃vote.html> Vote< / a>< / li> 
< li>< a class =spotlighthref =＃spotlight.html> Spotlight< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

CSS是这样的：

 ＃sub-nav-wrap {
 display：none; 
} 
  

这是我第一次问，而且我一直在绞尽脑汁，这工作使用本网站的其他类似代码，但没有任何工作。
会很感激任何帮助......

David

我已经构建了一个 jsFiddle ，以显示导航如何在没有cookie的情况下工作。
这是我尝试使用cookies。我希望它是简单的东西，我只是想知道...

解决方案

我注意到的一件事是jQuery.cookie没有出现在小提琴中，但我认为你在任何情况下都是在实际场地上。 这里你去。我相信有更有效的方法，但这仍然有效。

I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :

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

});

What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.

The html is this:

<!--- 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>

The CSS is this:

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

This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working. Would appreciate any help...

David

I have constructed a jsFiddle to show how the navigation works without a cookie. This is my attempt using cookies. I hope it is something simple and I've just miss understood...

解决方案

One thing I noticed was that jQuery.cookie was not present in the fiddle, but I assume you have that on the actual site in any case. Here you go. I am sure there are more efficient methods but this will still work.

这篇关于在页面刷新视图jsFiddle后，使用cookie.js保持div上的切换状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！