仿京东左侧菜单怎么使用Javascript实现点击显示隐藏

实现仿京东左侧菜单的点击显示隐藏效果，可以使用Javascript来操作DOM元素。具体实现步骤如下：

1. 首先，需要获取到左侧菜单的DOM元素，可以使用document.querySelector()或document.getElementById()方法来获取。

2. 然后，给左侧菜单中的每个分类添加一个点击事件监听器，当用户点击分类时，触发该事件。

3. 在事件处理函数中，需要获取到该分类下的子菜单DOM元素，并判断其当前的状态（显示或隐藏）。

4. 如果子菜单是隐藏状态，则将其显示出来（可以使用style.display属性或classList.add()方法来实现）；如果子菜单是显示状态，则将其隐藏起来。

下面是一个简单的示例代码，可以实现点击分类菜单时显示或隐藏其子菜单的效果：

HTML代码：

<ul id="menu">
  <li class="category">分类1
    <ul class="submenu">
      <li>子菜单1-1</li>
      <li>子菜单1-2</li>
    </ul>
  </li>
  <li class="category">分类2
    <ul class="submenu">
      <li>子菜单2-1</li>
      <li>子菜单2-2</li>
    </ul>
  </li>
</ul>

Javascript代码：

var categories = document.querySelectorAll('.category');
for (var i = 0; i < categories.length; i++) {
  categories[i].addEventListener('click', function() {
    var submenu = this.querySelector('.submenu');
    if (submenu.style.display === 'none') {
      submenu.style.display = 'block';
    } else {
      submenu.style.display = 'none';
    }
  });
}

代码中，首先使用document.querySelectorAll()方法获取所有的分类菜单，然后遍历每个分类菜单，为其添加一个点击事件监听器。在事件处理函数中，使用this关键字获取当前点击的分类菜单，然后再使用querySelector()方法获取其子菜单。根据子菜单的当前状态，使用style.display属性来显示或隐藏子菜单。