点击#menu-icon后.nav的.open类样式不生效，寻求jQuery替代方案

问题背景 #

点击#menu-icon后，.nav元素的.open类已在开发者工具Elements面板中显示，但样式未生效。使用Bootstrap构建导航栏，期望通过添加.open类时设置left:0实现导航栏的显示/隐藏，需用jQuery替代原生JavaScript实现功能。

问题原因 #

1. CSS选择器错误：.nav .open表示选择.nav内部的.open元素，而实际是.nav自身添加.open类，正确选择器应为.nav.open。
2. 未设置导航栏初始隐藏状态：.nav没有默认的left值，导致切换left:0时无视觉变化。

修复方案 #

1. 修正CSS代码 #

调整选择器并添加初始隐藏状态：

.nav {
    position: absolute;
    z-index: 10001;
    top: 65px;
    right: 30px;
    width: 270px;
    background-color: #f3efef;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 4px;
    transition: all .50s ease;
    font-size: 14px;
    left: -300px; /* 添加初始隐藏位置 */
}

.nav-item {
    margin-top: -2px;
    border-radius: 4px;
}

#menu-icon {
    display: block;
}

/* 修正选择器，选择带有.open类的.nav元素 */
.nav.open {
    left: 0;
}

2. 替换为jQuery代码 #

确保页面已引入jQuery库，然后添加以下代码：

$(document).ready(function() {
    $('#menu-icon').click(function() {
        $('.nav').toggleClass('open');
    });
});

3. 可选：修正HTML中的小问题 #

注意nav-link中的.bg-white多了个点，应该改为bg-white：

<!-- logo -->
<div class="logo">
    <img src="assets/logo.png" alt="logo g's shop">
</div>
<i class="ri-menu-line" id="menu-icon"></i>

<!-- nav -->
<ul class="nav nav-pills nav-fill m4">
  <li class="nav-item">
    <a class="nav-link active bg-white" aria-current="page" href="#">ALL ITEM</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SMARTPHONES</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">LAPTOPS</a>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者dwnld 017