我在 div 中有一个 CSS 菜单,它是用 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>
最佳答案
试试这个库:https://github.com/carhartl/jquery-cookie
在您的 show 事件函数中设置您的 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>
我通常建议下载并链接库的本地副本,但上面的内容应该可以让您开始运行。
编辑2:
这是一个工作 fiddle :http://jsfiddle.net/YZenq/1/
注意:JSFiddle 不与您的网页相同。
- fiddle 不需要准备好文档,因为他们的代码可以处理。您的页面应该使用它,但将所有代码放在一个而不是多个中。
- fiddle 不会让你改变你的文件头(
<head> ... </head>
)。 fiddle 在左侧有一个外部资源选项,可以执行与我为您提供的链接的库相同的操作。在 fiddle 上,您只需输入 URL(即脚本标签的 src 属性内的代码)。但是您需要添加整个脚本标签,即链接到库的较小的标签,就在您的 head 标签的末尾。
这有意义吗?
编辑 3:
更新了 fiddle with change 以阻止它设置多个 cookie 实例:http://jsfiddle.net/YZenq/2/
关于jquery - 在 jquery 中设置 cookie 以显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17158297/