js怎么实现点击主菜单时子菜单显示点击子菜单子菜单还是显示

在JavaScript中，实现点击主菜单时子菜单显示，点击子菜单时子菜单还是显示的功能，可以通过以下步骤来实现：

1. 我们需要在HTML中创建主菜单和子菜单的结构，每个主菜单项都应该有一个子菜单容器，子菜单项则直接放在这个容器中。

<ul id="mainMenu">
  <li>
    主菜单项1
    <ul >
      <li>子菜单项1</li>
      <li>子菜单项2</li>
    </ul>
  </li>
  <li>
    主菜单项2
    <ul >
      <li>子菜单项3</li>
      <li>子菜单项4</li>
    </ul>
  </li>
</ul>

2. 然后，我们需要使用CSS来设置主菜单和子菜单的样式，我们可以设置主菜单项为块级元素，子菜单项为内联元素，并默认隐藏子菜单。

#mainMenu > li { display: block; }
.subMenu { display: none; }

3. 接下来，我们需要使用JavaScript来监听主菜单项的点击事件，当主菜单项被点击时，我们可以通过修改其子菜单的`display`属性来显示或隐藏子菜单。

document.getElementById('mainMenu').addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'LI' && target.className === 'subMenu') {
    target.style.display = 'block';
  } else if (target.tagName === 'LI' && target.className !== 'subMenu') {
    var subMenu = target.getElementsByClassName('subMenu')[0];
    if (subMenu.style.display === 'none') {
      subMenu.style.display = 'block';
    } else {
      subMenu.style.display = 'none';
    }
  }
});

4. 我们需要确保在页面加载完成后执行上述JavaScript代码，这可以通过将JavaScript代码放在`window.onload`事件处理函数中来实现。

window.onload = function() {
  document.getElementById('mainMenu').addEventListener('click', function(event) {
    var target = event.target;
    if (target.tagName === 'LI' && target.className === 'subMenu') {
      target.style.display = 'block';
    } else if (target.tagName === 'LI' && target.className !== 'subMenu') {
      var subMenu = target.getElementsByClassName('subMenu')[0];
      if (subMenu.style.display === 'none') {
        subMenu.style.display = 'block';
      } else {
        subMenu.style.display = 'none';
      }
    }
  });
};

以上就是在JavaScript中实现点击主菜单时子菜单显示，点击子菜单时子菜单还是显示的功能的基本步骤，需要注意的是，这只是一个基本的实现，实际的项目中可能需要根据具体的需求进行更复杂的处理。

相关问题与解答：

1. Q: 我的主菜单和子菜单的结构不是这样的，我应该怎么修改上面的代码？

A: 你可以根据你实际的主菜单和子菜单的结构来修改上面的代码，主要的修改点是获取主菜单项和子菜单项的方式，以及修改子菜单的`display`属性的方式，你需要确保你的代码能够正确地找到主菜单项和子菜单项，并且能够正确地修改它们的`display`属性。

2. Q: 我的主菜单和子菜单的样式不是这样的，我应该怎么修改上面的代码？

A: 你可以根据你实际的主菜单和子菜单的样式来修改上面的代码，主要的修改点是设置主菜单和子菜单的`display`属性的值，你需要确保你的代码能够正确地设置主菜单和子菜单的`display`属性，以便正确地显示或隐藏它们。

3. Q: 我需要在点击其他区域时隐藏子菜单，我应该怎么做？

A: 你可以使用`mouseleave`事件来监听鼠标离开主菜单项的事件，当这个事件发生时，你可以将子菜单的`display`属性设置为`none`来隐藏它，`document.getElementById(‘mainMenu’).addEventListener(‘mouseleave’, function() { var subMenu = this.getElementsByClassName(‘subMenu’)[0]; subMenu.style.display = ‘none’; });`。

4. Q: 我的主菜单和子菜单是动态生成的，我应该怎么修改上面的代码？

A: 如果主菜单和子菜单是动态生成的，那么你可能需要使用事件委托的方式来监听主菜单项的点击事件，事件委托是一种在父元素上监听事件，然后在事件处理函数中判断目标元素是否满足条件的方法，即使主菜单和子菜单是动态生成的，我们也可以在它们被添加到DOM后立即开始监听事件，`document.getElementById(‘mainMenu’).addEventListener(‘click’, function(event) { var target = event.target; if (target.tagName === ‘LI’ && target.className === ‘subMenu’) { target.style.display = ‘block’; } else if (target.tagName === ‘LI’ && target.className !== ‘subMenu’) { var subMenu = target.getElementsByClassName(‘subMenu’)[0]; if (subMenu.style.display === ‘none’) { subMenu.style.display = ‘block’; } else { subMenu.style.display = ‘none’; } } }, true);`，在这个例子中，我们在`addEventListener`方法的最后一个参数中传入了`true`，这表示我们要在捕获阶段处理事件。