求助：如何用CodeIgniter+JS+jQuery实现汉堡下拉菜单显示/隐藏切换

核心实现步骤 #

以下是基于CodeIgniter、jQuery/原生JS的落地方案：

1. 视图层（CodeIgniter 视图文件）

先构建汉堡按钮和下拉菜单的HTML结构，用类名标识目标元素：

<!-- 汉堡触发按钮 -->
<button class="hamburger-trigger">☰</button>

<!-- 下拉菜单容器 -->
<div class="hamburger-dropdown">
  <ul>
    <li><a href="<?= base_url('home') ?>">首页</a></li>
    <li><a href="<?= base_url('about') ?>">关于我们</a></li>
    <li><a href="<?= base_url('contact') ?>">联系我们</a></li>
  </ul>
</div>

2. 样式层（CSS）

默认隐藏菜单，通过切换类实现显示/隐藏：

/* 默认状态：隐藏菜单 */
.hamburger-dropdown {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 200px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1.2rem 0;
}

/* 激活状态：显示菜单 */
.hamburger-dropdown.show {
  display: block;
}

.hamburger-trigger {
  border: none;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

3. 交互逻辑（jQuery 版本）

绑定按钮点击事件，切换菜单的显示类：

$(function() {
  // 点击汉堡按钮切换菜单状态
  $('.hamburger-trigger').on('click', function() {
    $('.hamburger-dropdown').toggleClass('show');
  });
});

4. 原生JS 替代方案（无需jQuery）

如果不想依赖jQuery，用原生JS实现同样逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const triggerBtn = document.querySelector('.hamburger-trigger');
  const dropdownMenu = document.querySelector('.hamburger-dropdown');
  
  triggerBtn.addEventListener('click', function() {
    dropdownMenu.classList.toggle('show');
  });
});

关键注意事项 #

• 确保jQuery已正确引入：可以在CodeIgniter模板的底部添加CDN链接，或引入本地jQuery文件；
• CodeIgniter路径配置：使用base_url()前，需在application/config/config.php中正确设置$config['base_url']；
• 可根据需求扩展样式（比如添加过渡动画、调整菜单位置等）。

内容的提问来源于stack exchange，提问作者Santosh Kumar Pradhan