在子菜单页面上保持打开的垂直菜单下拉列表

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!

我一直在努力解决如何让我的菜单子项在活动页面上保持打开时遇到的问题。我已经看到了解决方案的类似问题，但是当我实现它们时，我似乎无法让它们工作，所以我为之前提出的问题道歉。我正在使用Jquery打开子菜单项，允许在任何时候打开多个并且也随时关闭，唯一的问题是当点击子菜单项时菜单崩溃并且我希望它访问该页面时保持打开状态。我已经附上了一个JSFiddle，所以你可以想象我的问题是什么。谢谢，非常感谢所有帮助！

$(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>

2 个解决方案

#1

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

因此，您需要做的是在用户使用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>

#2

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

使用e.target和方法is（）和hasClass（）来检查您单击的元素：

$(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>