javascript - 单击 href 后禁用关闭下拉菜单

Question

我想在页面加载后让我的 dropdown 保持打开状态。例如，如果我点击 item(href) 进入 dropdown，我想在重定向后保持 dropdown 打开。

我看到有一个名为stopPropagation 的jquery 方法，但似乎这对我不起作用

HTML

<div class="sidenav">
  <div class="item_sn">
    Groups
  </div> 
  <div class="item_list_body">
    <div class="link_sidenav">
      <a href="#" class="sub_item">
        group 1
      </a>
    </div>
    <div class="link_sidenav">
        <a href="#" class="sub_item">
          group 2
        </a>
    </div>
  </div>
  <div class="item_sn">
    Users
  </div> 
  <div class="item_list_body">
    <div class="link_sidenav">
      <a href="#" class="sub_item">
        user 1
      </a>
    </div>
    <div class="link_sidenav">
        <a href="#" class="sub_item">
          user 2
        </a>
    </div>
  </div>
</div>

JQuery

<script>
  $(document).ready(function () {
    $('.item_list_body').hide();
    $('.item_sn').on('click', function (event) {
      var content = $(this).next('.item_list_body')
      content.slideToggle();
      $('.item_list_body').not(content).slideUp();
    });
  });
</script>

解决方案 1(无效):

$(document).on('click', '.sub_item', function (e) {
  $(this).parent('.link_sidenav').parent('.item_list_body').toggle();
});

Answer 1

您可以使用sessionStorage 来存储菜单的状态，然后通过检查状态在页面加载时打开菜单，如下所示

---

编辑

而不是使用菜单的状态，我们应该保存点击菜单的索引，如评论中所讨论的那样更新我的答案

 $(document).ready(function () {
    //sessionStorage.removeItem('opened');
    $('.item_list_body').hide();
    if (sessionStorage.getItem('opened') !== null) {
        $('.sidenav>div:eq(' + sessionStorage.getItem('opened') + ')').next('.item_list_body').show();
    }

    $('.item_sn').on('click', function (event) {
        var content = $(this).next('.item_list_body');
        var elem = $(this);

        content.slideDown(0, function () {
            sessionStorage.setItem('opened', elem.index());
        });
        $('.item_list_body').not(content).slideUp();
    });
});

希望对你有帮助