I designed a side menu that expands to reveal submenus. However, when I click on a subitem within a submenu, the entire list closes. The HTML, CSS, and JavaScript code all appear to be correct as the template is functioning properly. But as soon as I insert a link into the href attribute and click on a subitem, the entire sublist collapses again. Essentially, every time I switch to another page, the whole menu resets, whereas I want the submenu list to remain open. I've tried looking into similar issues but haven't been able to find a solution. As a beginner in front-end development, I'm struggling with this issue. Below are snippets of the relevant code. Any help would be greatly appreciated.
$('.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;
}
/* Rest of the CSS code... */
<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>