通过媒体查询实现响应式下拉菜单：小窗口点击触发+二次点击关闭

你已经搞定了大部分需求：大窗口下鼠标悬停展开下拉菜单，窗口缩小成滑动侧边栏时改成点击触发展开，现在就差再次点击按钮时关闭下拉菜单的功能对吧？我来帮你补全这个逻辑~

核心思路 #

把原来的「点击仅展开」逻辑改成切换逻辑——点击时判断菜单当前状态：如果是展开的就关闭，是收起的就展开。用jQuery的toggleClass()或者类存在判断都能轻松实现。

修改后的完整JavaScript代码 #

结合你已有的openNav和closeNav函数，假设下拉按钮类为.dropdown-trigger，下拉菜单容器类为.dropdown-content，可以这样调整：

// 打开侧边栏
function openNav(){ 
  $('body').addClass('open'); 
} 

// 关闭侧边栏
function closeNav(){ 
  $('body').removeClass('open'); 
} 

// 下拉菜单点击切换逻辑
$('.dropdown-trigger').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡，避免干扰侧边栏的显示逻辑
  // 切换下拉菜单的展开/收起状态
  const $dropdown = $(this).next('.dropdown-content');
  $dropdown.toggleClass('show');
  
  // 如果需要同时关闭其他已展开的下拉菜单，可以加上这段：
  $('.dropdown-content').not($dropdown).removeClass('show');
});

// 可选优化：点击页面其他区域关闭所有下拉菜单
$(document).on('click', function() {
  $('.dropdown-content').removeClass('show');
});

关键细节说明 #

1. 阻止事件冒泡：e.stopPropagation()能避免点击下拉按钮时，触发侧边栏的关闭逻辑或者全局点击事件，保证操作独立。
2. 类名控制显示：确保你的CSS中已经定义了.dropdown-content.show的显示样式，比如：

.dropdown-content {
  display: none;
}
.dropdown-content.show {
  display: block;
}

3. 关闭其他下拉：如果侧边栏有多个下拉菜单，加上$('.dropdown-content').not($dropdown).removeClass('show')可以实现「展开一个，收起其他」的交互，体验更流畅。

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