Question

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

＆＃13;

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

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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>

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

2 个答案: