单击子项后侧边菜单关闭

Posted 2023-05-08

【中文标题】单击子项后侧边菜单关闭

【英文标题】：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>

【参考方案1】：

尝试如下更改网址：

1. javascript:void(0)

<a href="javascript:void(0)" id="loginlink">login</a>

2。带禁用句柄

<a href="Some link" onClick="return false;" id="loginlink">login</a>

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

4. href="#"

<a href="#" id="loginlink">login</a>