單擊href后禁用關閉下拉菜單

Question

頁面加載后，我想保持dropdown打開。 例如，如果我單擊dropdown的item(href) ，我想在重定向后保持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();
    });
});

希望能幫助到你