刷新后保持崩溃状态

阿利普

在我的侧边栏中,我包含了一个折叠按钮以显示/隐藏表单。现在,我想在刷新页面时保持折叠状态:如果在刷新页面之前表单未折叠,则刷新后必须保持这种状态。

我想我需要在JavaScript中使用localStrorage,但实际上我不知道如何使用它。

这是我的HTML:

<!-- Sidebar -->
    <ul class="sidebar navbar-nav">
         <li class="nav-item active">
                  <a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                      <i class="fa fa-filter"></i>
                      <span>Search Filter</span>
                  </a>
          </li>


 </ul>

<!-- Form -->
<div class="collapse" id="collapseExample">
<form>
......
</form>

我只找到了一些代码,但似乎对我不起作用..:

var shown = []

// On collapse
shown.remove($(this).attr('id'));
localStorage.setItem('shown', shown);

// On open
shown.push($(this).attr('id'));
localStorage.setItem('shown', shown);

// On page load
var shown = localStorage.getItem('shown');
for (var s in shown) {
    $('#collapseExample' + s).show(); 
}

谢谢你的帮助!

多夫·雷恩

这是一个有效的Bootstrap 4折叠示例。与入门模板的主要区别在于,我将jQuery导入移动到了文件的顶部,以便可以使用document.load函数。我已经在代码中添加了注释,但是如果仍然不清楚,请继续提出问题。请注意,我留下了原始的javascript答案以供历史评论,以防万一对您有帮助。

我从这里使用了初始页面:https : //getbootstrap.com/docs/4.0/getting-started/introduction/

这是第一个折叠示例:https//getbootstrap.com/docs/4.0/components/collapse/

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
    <!-- jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script>
      $(function() {
        // store a reference to the collapse div so that 
        // we don't have to keep looking it up in the dom
        const collapseExample = $("#collapseExample");

        // register a callback function to the collapse div that
        // will be called every time the collapse is opened.
        collapseExample.on("shown.bs.collapse", function() {
            // since we know that that this function is called on
            // open, we'll set the localStorage value to "show" 
            localStorage.setItem("collapseExample", "show");
        });

        // register a callback function to the collapse div that
        // will be called every time the collapse is closed.
        collapseExample.on("hidden.bs.collapse", function() {
            // since we know that that this function is called on
            // open, we'll set the localStorage value to "hide" 
            localStorage.setItem("collapseExample", "hide");
        });

        // Since this function runs on page load (meaning only once), we can
        // check the value of localStorage from here and then call the
        // bootstrap collapse methods ourselves:

        // Check the value of the localStorage item
        const showExampleCollapse = localStorage.getItem("collapseExample");

        // Manipulate the collapse based on the value of the localStorage item.
        // Note that the value is determined by lines 36 or 44. If you change those,
        // then make sure to check that the comparison on the next line is still valid.
        if (showExampleCollapse === "show") {
            collapseExample.collapse("show");
        } else {
            collapseExample.collapse("hide");
        }
      });
    </script>
  </head>
  <body>
    <main>
      <p>
        <a
          class="btn btn-primary"
          data-toggle="collapse"
          href="#collapseExample"
          role="button"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          Link with href
        </a>
        <button
          class="btn btn-primary"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          Button with data-target
        </button>
      </p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>
    </main>

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

结束自举答案

BEGIN VANILLA JAVASCRIPT答案

这是您似乎想做的基本的独立版本。它虽然不漂亮,但希望它很清楚。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    function getCollapsed() {
        const state = localStorage.getItem('collapsed');
        if(state === 'collapsed'){
            return true;
        }
        return false;
    }
    function getStatus(){
        const resultDiv = document.getElementById('result');
        const isCollapsed = getCollapsed();
        if(isCollapsed){
            resultDiv.innerHTML = "collapsed";
        }else{
            resultDiv.innerHTML = "un-collapsed";
        }
    }
    function toggleCollapse(){
        const isCollapsed = getCollapsed();
        if(isCollapsed){
            localStorage.setItem('collapsed', 'un-collapsed');
        }else{
            localStorage.setItem('collapsed', 'collapsed');
        }
        getStatus();
    }
    </script>
</head>
<body onload="getStatus()">
    <div>
        <button onclick="toggleCollapse()">Toggle Collapse</button>
    </div>
    <div id="result"></div>
</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

刷新后保持选择状态

来自分类Dev

刷新后保持选择状态

来自分类Dev

调用servlet后保持崩溃状态

来自分类Dev

HTML复选框在刷新后保持选中状态

来自分类Dev

浏览器刷新后如何保持React组件状态

来自分类Dev

刷新窗口后,下拉列表未保持选中状态

来自分类Dev

浏览器刷新后如何保持React组件状态

来自分类Dev

隐藏的div保持刷新状态

来自分类Dev

刷新页面后,保持动态创建复选框处于选中状态

来自分类Dev

使用Vue.js和本地存储刷新页面后保持按钮文本状态

来自分类Dev

页面刷新后,有没有办法让jQuery保持选中状态?

来自分类Dev

刷新后使JQuery手风琴保持打开状态

来自分类Dev

Capistrano 3:部署后不是“刷新”代码(网站保持部署前的状态)

来自分类Dev

刷新后保持更改的颜色

来自分类Dev

刷新后保持下拉选择

来自分类Dev

rowGroupPanelShow的状态更改后的刷新刷新

来自分类Dev

如何在刷新时保持认证状态?

来自分类Dev

如何在刷新时保持认证状态?

来自分类Dev

使用JavaScript刷新后,iPad崩溃了

来自分类Dev

从内容脚本将File对象传递到background.js或传递createObjectURL(并在刷新后保持活动状态)

来自分类Dev

使用react.js在服务器端呈现页面刷新后使会话保持活动状态

来自分类Dev

页面刷新后如何保持图标选中

来自分类Dev

ClickableSpan TextView在单击后保持选中状态

来自分类Dev

悬停后使CSS悬停状态保持不变

来自分类Dev

AngularJS。页面重新加载后保持状态

来自分类Dev

Servicestack RedisClient被处置后保持连接状态

来自分类Dev

BottomSheetDialog在向下拖动后保持隐藏状态

来自分类Dev

更改后,RecyclerView不会保持修改状态

来自分类Dev

测试后如何保持上次退出状态

Related 相关文章

  1. 1

    刷新后保持选择状态

  2. 2

    刷新后保持选择状态

  3. 3

    调用servlet后保持崩溃状态

  4. 4

    HTML复选框在刷新后保持选中状态

  5. 5

    浏览器刷新后如何保持React组件状态

  6. 6

    刷新窗口后,下拉列表未保持选中状态

  7. 7

    浏览器刷新后如何保持React组件状态

  8. 8

    隐藏的div保持刷新状态

  9. 9

    刷新页面后,保持动态创建复选框处于选中状态

  10. 10

    使用Vue.js和本地存储刷新页面后保持按钮文本状态

  11. 11

    页面刷新后,有没有办法让jQuery保持选中状态?

  12. 12

    刷新后使JQuery手风琴保持打开状态

  13. 13

    Capistrano 3:部署后不是“刷新”代码(网站保持部署前的状态)

  14. 14

    刷新后保持更改的颜色

  15. 15

    刷新后保持下拉选择

  16. 16

    rowGroupPanelShow的状态更改后的刷新刷新

  17. 17

    如何在刷新时保持认证状态?

  18. 18

    如何在刷新时保持认证状态?

  19. 19

    使用JavaScript刷新后,iPad崩溃了

  20. 20

    从内容脚本将File对象传递到background.js或传递createObjectURL(并在刷新后保持活动状态)

  21. 21

    使用react.js在服务器端呈现页面刷新后使会话保持活动状态

  22. 22

    页面刷新后如何保持图标选中

  23. 23

    ClickableSpan TextView在单击后保持选中状态

  24. 24

    悬停后使CSS悬停状态保持不变

  25. 25

    AngularJS。页面重新加载后保持状态

  26. 26

    Servicestack RedisClient被处置后保持连接状态

  27. 27

    BottomSheetDialog在向下拖动后保持隐藏状态

  28. 28

    更改后,RecyclerView不会保持修改状态

  29. 29

    测试后如何保持上次退出状态

热门标签

归档