jquery - 如果显示多个页面,则保持相同的CSS“迷你栏”

标签 jquery css twitter-bootstrap-3

我有几个HTML页面都设计相同。有一个侧面菜单栏,当再次按下该按钮时,它会关闭并使其变为“迷你栏”。它的工作原理完美,唯一的问题是,当您移至下一页时,它会自动返回到“完整版”。有一种方法可以使页面之间保持相同的状态,以便在第一页上显示迷你栏时您转到下一页迷你栏仍然存在并且没有重置?

<body class="pace-done mini-navbar">

<body class="pace-done">

最佳答案

同上说,一种可能的解决方案是将其打开/关闭状态添加到cookie变量中,这样,当打开/关闭新页面时,该值将被保存。

首先得到这个:https://github.com/carhartl/jquery-cookie
并包含在文件中,然后例如如何使用,
去这里:How do I set/unset cookie with jQuery?

然后,一旦您了解了所有这些,然后快速举一个肮脏的例子,您将

(伪代码)(jQuery)

$(document).ready(function(){

   //set cookie here
   $.cookie("IsBoxOpen", "yes"); //meaning yes its open on default

   $('#buttonToCLickHere').on("click", function(){
        if(box is open){
           //then close it with css/js etc but then save its state
           //code to close it visually here, then
           $.cookie("IsBoxOpen", "no"); //meaning now itll be closed
        } else {
             //do the opposite here, and then also save its status with the cookie.
          }
    });

});


这样,每次有人打开/关闭框(或单击按钮)时,其状态就会保存在cookie中,并且用户将不知道差异在页面之间的变化。

OH和PS,此代码必须放在footer.php或header.php文件(或html)中,以便检查在每个页面上进行。

希望这可以帮助并引导您朝正确的方向发展

关于jquery - 如果显示多个页面,则保持相同的CSS“迷你栏”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37572387/

相关文章:

javascript - 如何将 jQuery 函数存储在对象中以供以后访问?

javascript - 包装 jQuery 函数

javascript - HTML5 FileReader API - 如何删除文件

css - TR :hover not working

python - 如何过滤django模板中的表单

jquery - 从一个列表中拖放 jQuery UI 可拖动元素并将其放入另一个列表中的问题

css - 调整为移动尺寸并再次重置为桌面尺寸后,导航栏的高度增加

Javascript Fetch API 未在多张卡上显示结果

php - 特定行上的自举表 ionic

jquery - 带向下箭头的 CSS 菜单