js,jQuery，菜单tap打开

Question

在js或者jQuery中如何实现； 左侧的菜单是通过链接配置的，在代码中没有。是直接查的库里的连接打开的页面。

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据您提供的信息，我理解您想要实现一个侧边菜单，点击某个菜单项（例如“港口工程”）时，能够展开或显示相关的子菜单或内容。这种功能可以通过JavaScript（或jQuery）来实现。以下是一个基本的实现思路：

HTML 结构

首先，假设您的HTML结构大致如下：

<div id="sidebar">
  <ul id="menu">
    <li>项目库
      <ul class="submenu">
        <li>港口工程</li>
        <li>市政交通工程</li>
        <!-- 其他子项 -->
      </ul>
    </li>
    <li>人员库</li>
    <li>企业库</li>
    <!-- 其他菜单项 -->
  </ul>
</div>

CSS 样式

您可以添加一些CSS来隐藏子菜单：

.submenu {
  display: none; /* 初始状态下隐藏子菜单 */
}

JavaScript/jQuery 实现

然后，您可以使用JavaScript或jQuery来监听菜单项的点击事件，并显示或隐藏相应的子菜单。

JavaScript 实现：

document.querySelector('#menu li').addEventListener('click', function(e) {
  // 阻止冒泡，这样点击事件不会传递到父元素或其他元素
  e.stopPropagation();
  // 获取子菜单并显示或隐藏它
  var submenu = this.querySelector('.submenu');
  submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
});

jQuery 实现：

如果您更熟悉jQuery，可以使用以下代码：

$('#menu li').click(function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父元素或其他元素
  $(this).find('.submenu').slideToggle('fast'); // 显示或隐藏子菜单
});

注意事项：

• 确保您的HTML结构正确，并且已经加载了jQuery库（如果使用jQuery）。
• 根据您的具体需求调整CSS和JavaScript代码。例如，您可能需要添加动画效果或其他交互功能。
• 如果您使用的是某种特定的框架或库（如Bootstrap、jQuery UI等），可能有更简便的方法来实现这个功能。请提供更多信息以便我能提供更具体的帮助。