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

问题描述

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

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

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

html是这样的：

p>

 <！--- Main Sub Wrap ---> 
< 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; 
} 
  

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

解决方案

你几乎完成了所有事情，只写了很多多余的:)

$ b $

  $（function（）{
 if（$。cookie（'submin_visible'）=='true'）） {
 $（'＃sub-nav-wrapmin'）。show（）; 
 $（'＃sub-nav-wrap'）。hide（）; 
} else {
 $（'＃sub-nav-wrapmin'）。hide（）; 
 $（'＃sub-nav-wrap'）。show（）; 
} 
 
 $（'。button'）。click（function（）{
 $（'＃sub-nav-wrapmin'）。toggle（）; 
 $（'＃sub-nav-wrap'） .toggle（）; 
 
 var isVisible = $（'＃sub-nav-wrapmin'）。is（'：visible'）。toString（）; 
 $ .cookie（'submin_visible '，isVisible）; 
}）; 
}）; 
  

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. Please help...

解决方案

you're almost done everything right only have written a lot of superfluous :)

$(function(){
    if($.cookie('submin_visible') == 'true') {
        $('#sub-nav-wrapmin').show();
        $('#sub-nav-wrap').hide();
    } else {
        $('#sub-nav-wrapmin').hide();
        $('#sub-nav-wrap').show();
    }

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

        var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
        $.cookie('submin_visible', isVisible);
    });
});

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