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

Question

我一直在努力思考如何让我的菜单子项在活动页面上保持打开状态。我已经看到与决议类似的问题，但是当我实施它们时我似乎无法让它们发挥作用，所以我对之前提出的问题表示歉意。我正在使用 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>

Answer 1

所以你需要做的是在用户使用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>

Answer 2

使用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>