为显示/隐藏div在jquery中设置cookie [英] set cookie in jquery for show/hide div

问题描述

我在用CSS设置的div中有一个CSS菜单:display:none;页面加载.

我有这个html:

<a class="show_menu">Show Menu</a>
<a class="hide_menu" style="display:none;">Hide Menu</a>

<div id="nav" style="display:none;">
div content here
</div

和这个JQUERY:

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
});
</script>

显示或隐藏div时查看cookie的最佳方法是什么，因此，当用户更改页面时，如果打开菜单，它将保持在另一页上的打开状态；如果关闭菜单，则将关闭在所有其他页面上，直到他们再次打开它?

这是我的新代码

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

<script>
var menu_state = $.cookie('mydomain_menuflag');
alert(menu_state);
if(menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;
</script>

<div class="show_menu"><a>Show Menu</a></div>
<div class="hide_menu" style="display:none;"><a>Hide Menu</a></div>

<div id="nav" style="display:none;">
<li><a href="/admin/index.php">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/index.php?id=customer/addcustomer">Add Company</a></li>
    <li><a href="/admin/index.php?id=customer/viewcustomer">View Company</a></li>
    <li><strong>Contacts</strong></li>
    <li><a href="/admin/index.php?id=contacts/addcontact">Add Contact</a></li>
    <li><a href="/admin/index.php?id=contacts/viewcontact">View Contact</a></li>
    <li><strong>Resellers</strong></li>
    <li><a href="/admin/index.php?id=reseller/addreseller">Add Reseller</a></li>
    <li><a href="/admin/index.php?id=reseller/viewreseller">View Reseller</a></li>
    <li><strong>Salesman</strong></li>
    <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
<li><a>Customer Info</a>
    <ul>
    <li><a href="/admin/index.php?id=customer/commsone-phonelines">Comms One Phone Lines</a></li>
    </ul>
</li>

</div>

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
   $.cookie('mydomain_menuflag', 'visible');
   var menu_state = $.cookie('mydomain_menuflag');
   alert(menu_state);
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
   $.cookie('mydomain_menuflag', 'hidden');
});
</script>

解决方案

尝试以下lib: https://github.com/carhartl/jquery-cookie

在表演事件功能中设置cookie:

$.cookie('mydomain_menuflag', 'visible');

并隐藏:

$.cookie('mydomain_menuflag', 'hidden');

在文档加载中进行初步检查

var menu_state = $.cookie('mydomain_menuflag');
if( typeof menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;

我没有测试，所以让我知道是否遗留了错误.

这是应该执行的全部代码:

<script type = "text/javascript">

$( document ).ready(function() {

  // setup the initial display on page load
  var menu_state = $.cookie('mydomain_menuflag');

  if( typeof menu_state !== "undefined" && menu_state == "visible" ) {
    $('#nav').show; // visible, and cookie is set
  } else {
    $('#nav').hide; // hidden or cookie is not set, set just in case
    $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
  }

  // listen for the clicks
  $('.show_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'visible'); // update (or set) the cookie
     $("#page_cont").css("width", "80%");
     $(".hide_menu").css("display", "block");
     $(".show_menu").css("display", "none");
  });
  $('.hide_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
     $("#page_cont").css("width", "100%");
     $(".hide_menu").css("display", "none");
     $(".show_menu").css("display", "block");
  });

});

</script>

并将此行添加到您的head标签内:<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

通常，我建议下载并链接该库的本地副本，但是以上内容应该使您开始并运行.

这是一个有效的小提琴: http://jsfiddle.net/YZenq/1/

注意:JSFiddle与您的网页不相同.

1. 小提琴不需要准备好文档，因为他们的代码可以处理该文档.您的页面应使用该代码，但将所有代码放入一个而不是多个代码中.
2. 小提琴不允许您更改文档头(<head> ... </head>).小提琴在左侧有一个外部资源选项，可以与我为您提供的链接所用的库做相同的事情.在小提琴上，您只需要输入URL(即script标记的src属性内的代码).但是您将需要在head标记的末尾添加整个脚本标记(链接到库的较小的脚本标记).

这有意义吗?

更新了小提琴，并进行了更改，以阻止它设置多个Cookie实例: http://jsfiddle.net/YZenq/2/

I have a CSS menu in a div that is set with CSS: display:none; on page load.

I have this html:

<a class="show_menu">Show Menu</a>
<a class="hide_menu" style="display:none;">Hide Menu</a>

<div id="nav" style="display:none;">
div content here
</div

and this JQUERY:

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
});
</script>

What would be the best way to see a cookie when the div is shown or hidden so when the user changes the page, if they had the menu open it would stay open on another page and if they close the menu it would close on all other pages until they open it again?

EDIT: here is my new code

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

<script>
var menu_state = $.cookie('mydomain_menuflag');
alert(menu_state);
if(menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;
</script>

<div class="show_menu"><a>Show Menu</a></div>
<div class="hide_menu" style="display:none;"><a>Hide Menu</a></div>

<div id="nav" style="display:none;">
<li><a href="/admin/index.php">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/index.php?id=customer/addcustomer">Add Company</a></li>
    <li><a href="/admin/index.php?id=customer/viewcustomer">View Company</a></li>
    <li><strong>Contacts</strong></li>
    <li><a href="/admin/index.php?id=contacts/addcontact">Add Contact</a></li>
    <li><a href="/admin/index.php?id=contacts/viewcontact">View Contact</a></li>
    <li><strong>Resellers</strong></li>
    <li><a href="/admin/index.php?id=reseller/addreseller">Add Reseller</a></li>
    <li><a href="/admin/index.php?id=reseller/viewreseller">View Reseller</a></li>
    <li><strong>Salesman</strong></li>
    <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
<li><a>Customer Info</a>
    <ul>
    <li><a href="/admin/index.php?id=customer/commsone-phonelines">Comms One Phone Lines</a></li>
    </ul>
</li>

</div>

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
   $.cookie('mydomain_menuflag', 'visible');
   var menu_state = $.cookie('mydomain_menuflag');
   alert(menu_state);
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
   $.cookie('mydomain_menuflag', 'hidden');
});
</script>

解决方案

Try this lib: https://github.com/carhartl/jquery-cookie

Set your cookie in your show event function:

$.cookie('mydomain_menuflag', 'visible');

and hide:

$.cookie('mydomain_menuflag', 'hidden');

and in document load do your initial check

var menu_state = $.cookie('mydomain_menuflag');
if( typeof menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;

I didn't test, so let me know if I left a bug in.

Edit:

Here's the whole code that should do it:

<script type = "text/javascript">

$( document ).ready(function() {

  // setup the initial display on page load
  var menu_state = $.cookie('mydomain_menuflag');

  if( typeof menu_state !== "undefined" && menu_state == "visible" ) {
    $('#nav').show; // visible, and cookie is set
  } else {
    $('#nav').hide; // hidden or cookie is not set, set just in case
    $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
  }

  // listen for the clicks
  $('.show_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'visible'); // update (or set) the cookie
     $("#page_cont").css("width", "80%");
     $(".hide_menu").css("display", "block");
     $(".show_menu").css("display", "none");
  });
  $('.hide_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
     $("#page_cont").css("width", "100%");
     $(".hide_menu").css("display", "none");
     $(".show_menu").css("display", "block");
  });

});

</script>

and add this line inside your head tag: <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

I would generally recommend downloading and linking a local copy of the library, but the above should get you up and running to start with.

Edit 2:

Here's a working fiddle: http://jsfiddle.net/YZenq/1/

NOTE: A JSFiddle is not the same as your web page.

1. The fiddle does not need a document ready as their code handles that. Your page should use that, but put all your code inside one, not multiple.
2. A fiddle does not let you change your document head ( <head> ... </head> ). The fiddles have an external resources option on the left to do the same thing as the library I provided the link to for you. On a fiddle you just put in the URL (ie. the code inside the src attribute of the script tag). But you will need to add the whole script tag, the smaller one that links to the library, just inside the end of your head tag.

Does that make sense?

Edit 3:

Updated fiddle with change to stop it setting multiple cookie instances: http://jsfiddle.net/YZenq/2/

这篇关于为显示/隐藏div在jquery中设置cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！