javascript - 页面刷新时如何保持菜单状态？

Question

我有一个非常简单的垂直菜单，它将有很多级别(在线商店) 它的工作原理如您在代码片段中看到的那样:

$(".boton-BB").click(function () {                   
  $(this).parent().find('> ul').toggle();                    
});

ul {
  list-style-type: none;
  padding:0;
  margin:0;
}
.boton-BB {
    display:inline-block;
    position:absolute;
    z-index:1;
    width:25px;
    height:20px;
    background-color:red;
    top:18px;
    right:30px;
    cursor:pointer; 
    }
.menu-lateral-BB {
    background-color:#939597; 
    font-size:15px; 
    line-height:50px; 
    font-weight:400;  
    min-height:600px;/*PROVISIONAL*/ 
    }
.menu-lateral-BB a {
    height:100%;
    width:100%;
    padding-left:20px;
    color:#fff;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right:30px;
    }
.menu-lateral-BB ul {
    width:100%;
    }
.menu-lateral-BB li {
    position:relative;
    width:100%;
    border-top:1px solid #d1d3d4;
    box-shadow: 0 -1px 0 0 #666;
    }
.menu-lateral-BB > ul > li:first-child {border-top:0px solid #d1d3d4; box-shadow: none;}
.menu-lateral-BB > ul > li:last-child {border-bottom:1px solid #666;box-shadow: 0 1px 0 0 #d1d3d4, 0 -1px 0 0 #666;}
.menu-lateral-BB > ul > li ul {display:none;}
.menu-lateral-BB > ul > li ul li a {padding-left:30px;}
.menu-lateral-BB > ul > li ul li ul li a {padding-left:40px;}
.menu-lateral-BB > ul > li ul li ul li ul li a {padding-left:50px;}
.menu-lateral-BB > ul > li ul li ul li ul li ul li a {padding-left:60px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="width:400px;position:relative;">
<div class="menu-lateral-BB">
  <ul>
  <li><a href="#">Categoria 3</a>
      <div class="boton-BB"></div>
      <ul>
        <li><a href="#">Subcategoria 1</a></li>
        <li><a href="#">Subcategoria 2</a></li>
      </ul>
    </li>
    <li class=""><a href="#">Categoria 1</a>
      <div class="boton-BB"></div>
      <ul>
        <li><a href="#">Subcategoria 1</a></li>
        <li><a href="#">Subcategoria 2</a>
          <div class="boton-BB"></div>
          <ul>
            <li><a href="#">sub-Subcategoria 1</a></li>
            <li><a href="#">sub-Subcategoria 2</a></li>
          </ul>
        </li>
        <li><a href="#">Subcategoria 3</a></li>
      </ul>
    </li>   
  </ul>
</div>
</div>

使其工作的 jQuery 非常简单，因为您只需单击红色方 block 即可打开下一个级别。

但我想保持菜单的状态与页面刷新时用户拥有的“打开”级别一样多(单击链接)。

我尝试使用一些类似的正确答案，但没有成功。

有没有简单的方法可以实现这一点？

Answer 1

我建议使用 cookie。

$(".boton-BB").click(function() {
  var button = $(this),
    expires,
    days = 2, //Number of days for how long should the cookie stay
    data = new Date(),
    name = button.data('cat');

  if (button.hasClass("open")) {
    button.parent().find('> ul').hide();

    //delete cookie
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  } else {
    button.parent().find('> ul').show();

    //set cookie
    data.setTime(data.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + data.toGMTString();
    document.cookie = name + "=" + val + expires + "; path=/";
  }
});

<div style="width:400px;position:relative;">
  <div class="menu-lateral-BB">
    <ul>
      <li>
        <a href="#">Categoria 3</a>
        <div class="boton-BB <?= isset($_COOKIE['cat3']) ? " open " : "closed "; ?>" data-cat="cat3"></div>
        <ul <?=i sset($_COOKIE[ 'cat3']) ? "style='display: block;'" : "style='display: none;'"; ?>>
          <li><a href="#">Subcategoria 1</a></li>
          <li><a href="#">Subcategoria 2</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Categoria 1</a>
        <div class="boton-BB <?= isset($_COOKIE['cat1']) ? " open " : "closed "; ?>" data-cat="cat1"></div>
        <ul <?=i sset($_COOKIE[ 'cat1']) ? "style='display: block;'" : "style='display: none;'"; ?>>
          <li><a href="#">Subcategoria 1</a></li>
          <li><a href="#">Subcategoria 2</a>
            <div class="boton-BB <?= isset($_COOKIE['subcat2']) ? " open " : "closed "; ?>" data-cat="subcat2"></div>
            <ul <?=i sset($_COOKIE[ 'subcat2']) ? "style='display: block;'" : "style='display: none;'"; ?>>
              <li><a href="#">sub-Subcategoria 1</a></li>
              <li><a href="#">sub-Subcategoria 2</a></li>
            </ul>
          </li>
          <li><a href="#">Subcategoria 3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

问候，KJ。