Vertical menu dropdown that stays open on sub menu pages

Question

I've been having trouble trying to wrap my head around how to get my menu sub items to stay open when on the active page. I've seen similar issues with resolutions but I can't seem to get them to work when I implement them, so I do apologise for the question being asked before. I'm using Jquery to open the sub menu items, allowing more than one to be open at any time and also closed at any time, the only issue is when a sub menu item is clicked the menu collapses and i'd like it to stay open when that page is visited. I've attached a JSFiddle to this so you can visualise what my questions is. Thank you, all help is greatly appreciated!

$(document).ready(function(e) {
  $('.has-sub').click(function() {
    $(this).toggleClass('open');
  });
});

body {
  font-family: sans-serif;
}

.left-nav {
  width: 250px;
  /*change to 100% of contain*/
  background-color: gray;
}

.left-nav ul {
  padding: 0px;
}

.left-nav li {
  list-style: none;
}

.left-nav a {
  display: block;
  padding: 10px 0px 10px 20px;
  text-decoration: none;
  color: #fff;
}


/*hiding sub menu items*/

.left-nav ul ul {
  display: none;
}


/*giving jquery a target*/

.left-nav ul li.open ul {
  display: block;
}


/*arrow*/

.left-nav .has-sub:before {
  content: '\203A';
  float: right;
  color: #fff;
  margin-top: 10px;
  margin-right: 40px;
  /*to make it move*/
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

.left-nav li.open:before {
  content: '\2039';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
  <ul>
    <li class="has-sub"><a href="#">1st</a>
      <!-- First nest -->
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">2nd</a>
      <!-- First nest -->
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li><a href="#">3rd</a></li>
    <li><a href="#">4th</a></li>
    <li><a href="#">5th</a></li>
  </ul>
</nav>

score 1 · Accepted Answer · answered Oct 30 '17 at 16:37

So what you need to do is to stop the propagation of the event when the user clicks the sub menu item using stopPropagation

$(document).ready(function(e) {
  $('.has-sub').click(function() {
    $(this).toggleClass('open');
  });
  // Just add this
  $('.has-sub li a').click(function (e) {
    e.stopPropagation();
  });
});

body {
  font-family: sans-serif;
}

.left-nav {
  width: 250px;
  /*change to 100% of contain*/
  background-color: gray;
}

.left-nav ul {
  padding: 0px;
}

.left-nav li {
  list-style: none;
}

.left-nav a {
  display: block;
  padding: 10px 0px 10px 20px;
  text-decoration: none;
  color: #fff;
}


/*hiding sub menu items*/

.left-nav ul ul {
  display: none;
}


/*giving jquery a target*/

.left-nav ul li.open ul {
  display: block;
}


/*arrow*/

.left-nav .has-sub:before {
  content: '\203A';
  float: right;
  color: #fff;
  margin-top: 10px;
  margin-right: 40px;
  /*to make it move*/
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

.left-nav li.open:before {
  content: '\2039';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
  <ul>
    <li class="has-sub"><a href="#">1st</a>
      <!-- First nest -->
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">2nd</a>
      <!-- First nest -->
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li><a href="#">3rd</a></li>
    <li><a href="#">4th</a></li>
    <li><a href="#">5th</a></li>
  </ul>
</nav>

Thank you for your reply! I've added stopPropagation using the code you supplied but unfortunate it didn't seem to do the trick http://prntscr.com/h3zkon This is it before, and then after clicking this happens http://prntscr.com/h3zl4u — Aaron, Oct 30 '17 at 17:02
Does the link redirect to another page? Because if it does you'll have to add the class in the html so that the subitem stays open when the new page is loaded. — kakamg0, Oct 30 '17 at 17:10
Yeah, it directs to another page, which class do I need to add sorry? I'm slowly learning :P — Aaron, Oct 30 '17 at 17:29
That's ok. You'll need to add the class "open" to the menu item where the subitem belongs to. Something like this `
I'm most likely going to add this into WordPress - i already have it working in wordpress with opening the menu and closing just not it remaining open! I've tested the code, thank you! this works! I'm not sure if it's applicable to WP unfortunately - this definitely does the trick though! Thank you for your help! :) — Aaron, Oct 30 '17 at 17:48

SilverSurfer · Answer 2 · 2017-10-30T17:52:53.987

Use e.target and the methods is() and hasClass() to check the element you are clicking:

$(document).ready(function() {
    $('.has-sub').click(function(e) {
        var val = $(e.target).parent();
        if (val.is("li") && val.hasClass("has-sub")) {
            $(val).toggleClass('open');
        }
    })
})

body {
  font-family: sans-serif;
}

.left-nav {
  width: 250px;
  /*change to 100% of contain*/
  background-color: gray;
}

.left-nav ul {
  padding: 0px;
}

.left-nav li {
  list-style: none;
}

.left-nav a {
  display: block;
  padding: 10px 0px 10px 20px;
  text-decoration: none;
  color: #fff;
}


/*hiding sub menu items*/

.left-nav ul ul {
  display: none;
}


/*giving jquery a target*/

.left-nav ul li.open ul {
  display: block;
}


/*arrow*/

.left-nav .has-sub:before {
  content: '\203A';
  float: right;
  color: #fff;
  margin-top: 10px;
  margin-right: 40px;
  /*to make it move*/
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

.left-nav li.open:before {
  content: '\2039';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
  <ul>
    <li class="has-sub">
      <a href="#">1st</a>
      <!-- First nest -->
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">2nd</a>
      <!-- First nest -->
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li><a href="#">3rd</a></li>
    <li><a href="#">4th</a></li>
    <li><a href="#">5th</a></li>
  </ul>
</nav>

Sorry to be a bother, i'm fairly new to this and still trying to get my head around things. I've tried using the code you've given me but unfortunately it didn't seem to do the trick, before: https://prnt.sc/h3zkon and then after clicking: https://prnt.sc/h3zl4u - sorry to be a pain — Aaron, Oct 30 '17 at 17:08
Just tried it but I got the same result, thanks for your time and help! :) — Aaron, Oct 30 '17 at 17:55

Vertical menu dropdown that stays open on sub menu pages

2 Answers2