我想切换我的菜单并将其设置保存在cookie中。这是我的切换按钮的Jquery代码:
我的HTML
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
我的代码
var $MENU_TOGGLE = $('#menu_toggle')
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
答案 0 :(得分:1)
我使用localStorage来解决我的问题。这是在本地存储设置的简单方便的方法。我添加了这两行。
这是我的代码:
localStorage.setItem('Menu', 'Mini');
localStorage.setItem('Menu', 'Larg');
然后我在我的页面中添加了脚本,如下所示:
<script>
if (localStorage.Menu === 'Mini') {
$("body").addClass('nav-sm');
} else {
$("body").addClass('nav-md');
}
</script>
答案 1 :(得分:0)
document.cookie = "togglesetting=John Doe; expires=Thu, 18 Dec 2017 12:00:00 UTC";
您可以将设置信息放入Cookie中的任何键值模式。
我的建议是在那里放一个json并从cookie中读取togglesetting键,而不是相应地设置你的toogle菜单</ p>
答案 2 :(得分:0)
我今天早些时候刚刚写了一篇关于我正在建设的网站的文章。我首选的方法是向头部添加一个cookie检查。这会为你可以附加样式的html添加一个类。
<script type="text/javascript">
if (document.cookie.replace(/(?:(?:^|.*;\s*)hasClosedMenu\s*\=\s*([^;]*).*$)|^.*$/, "$1") == false) {
document.documentElement.className += " menu-open "
}
</script>
下面你会找到设置cookie的功能,确定菜单是否打开。
$('.menu-toggle').on('click',function(){
$('html').toggleClass('open-menu');
if ($('html').hasClass('open-menu')){
document.cookie = "hasClosedMenu=; max-age=0; domain="+window.location.hostname+"; path=/; ";
} else {
document.cookie = "hasClosedMenu=true; max-age=864000; domain="+window.location.hostname+"; path=/; ";
}
});
我希望这会有所帮助。