[英]How can I save setting of my menu_toggle using cookie?
我想切換菜單並將其設置保存在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();
});
我用localStorage解決了我的問題。 這是在本地存儲設置的非常簡單的方法。 我添加這兩行。
這是我的代碼:
localStorage.setItem('Menu', 'Mini');
localStorage.setItem('Menu', 'Larg');
然后我在頁面中添加了如下腳本:
<script>
if (localStorage.Menu === 'Mini') {
$("body").addClass('nav-sm');
} else {
$("body").addClass('nav-md');
}
</script>
document.cookie = "togglesetting=John Doe; expires=Thu, 18 Dec 2017 12:00:00 UTC";
您可以將設置信息放入cookie中的任何鍵值模式。
我的建議是在其中放置一個json並從cookie中讀取togglesetting鍵,而不是適當地設置toogle菜單
我剛剛在今天早些時候為我正在構建的網站寫過這篇文章。 我的首選方法是將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=/; ";
}
});
我希望這有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.