CODEWITHSUNDEEP
javascriptjqueryhtml
stig Garet
stig Garet

Reputation: 564

Disable close dropdown after click href

I would like to keep my dropdown opened after a page load. For example if I click on an item(href) into an dropdown, I would like to keep the dropdown opened after the redirection.

I've seen that there is a method jquery named stopPropagation, but it seems that this does not work for me

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>

Solution 1 (not working) : 

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

Upvotes: 1

Views: 40

Answers (1)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23758

you can use sessionStorage to store the state of the menu and then open the menu on page load by checking the state see below

EDIT

rather than using state of the menu we should save the index of the clicked menu as discussed in the comment so updated my answer

 $(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();
    });
});

Hope it helps

Upvotes: 2

Related Questions