单击子项后侧边菜单关闭答案

【问题标题】：The side menu closes after clicking on subitem单击子项后侧边菜单关闭
【发布时间】：2021-10-26 14:21:01
【问题描述】：

我创建了一个侧边菜单。展开后，例如，第一个元素，当我单击第一个子项时，带有子项的整个列表关闭。所有代码似乎都是正确的，因为 html、css 和 js 中的模板正在工作。但是，当我将链接插入 href 并单击其中一个子项时，整个子列表会再次关闭。总结一下——切换到另一个页面后，整个菜单重新启动。但我希望子菜单列表仍然打开。我已经审查了类似的主题，但未能实施任何解决方案。抱歉，我是前端新手。以下是代码片段。我会很感激你的帮助。

$('.feat-btn').click(function() {
  $('nav ul .feat-show').toggleClass("show");
  $('nav ul .first').toggleClass("rotate");
});

@import url('https://fonts.googleapis.com/css2? family= Poppins:wght@300 & display=swap') * {
  margin: 0;
  padding: 0: user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif
}

.sidebar {
  position: fixed;
  width: 400px;
  height: 100%;
  left: 0;
  background: #1b1b1b;
}

nav ul {
  background: #1b1b1b;
  height: 100%;
  width: 100%;
  list-style: none
}

nav ul li {
  line-height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav ul li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav ul li a {
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding-left: 0px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}

nav ul ul {
  position: static;
  display: none;
}

nav ul .feat-show.show {
  display: block;
}

nav ul ul li {
  line-height: 42px;
  border-bottom: none;
}

nav ul ul li a {
  font-size: 14px;
  color: #e6e6e6;
  padding-left: 0px;
}

nav ul li a:hover {
  color: cyan;
  background: #1e1e1e;
}

nav ul ul li a:hover {
  color: cyan!;
  background: #1e1e1e;
}

nav ul li a span {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}

nav ul li a span.rotate {
  transform: translateY(-50%) rotate(-180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="sidebar">
  <ul>
    <li><a class="feat-btn">First element<span class="fas fa-caret-downfirst"></span></a>
      <ul class="feat-show">
        <li><a href="some link">First subitem</a></li>
        <li><a href="some link">Second subitem</a></li>
        <li><a href="some link">Third subitem</a></li>
      </ul>
    </li>
  </ul>
</nav>

【问题讨论】：

标签： javascript html jquery css menu

【解决方案1】：

尝试如下更改网址：

1. javascript:void(0)

&lt;a href="javascript:void(0)" id="loginlink"&gt;login&lt;/a&gt;

2。带禁用句柄

&lt;a href="Some link" onClick="return false;" id="loginlink"&gt;login&lt;/a&gt;

3.你可以用标签span替换标签a

4. href="#"

&lt;a href="#" id="loginlink"&gt;login&lt;/a&gt;

【讨论】：