单击href后禁用关闭下拉列表

Posted 2021-04-15

我想在页面加载后保持我的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();
});

答案

您可以使用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();
    });
});

希望能帮助到你