在基于jQuery实现侧边栏菜单的交互功能时，首次加载后菜单默认折叠，点击展开按钮需要双击才能触发展开效果是比较常见的问题，该问题的核心原因通常是菜单初始状态的状态标记与DOM实际状态不匹配，或者事件绑定逻辑存在疏漏。
问题产生的原因分析
要解决问题首先需要明确其产生的原因，常见的诱因主要有两类：
- 菜单初始状态的状态变量设置错误，比如默认折叠时状态变量被标记为已展开，导致首次点击时逻辑判断反向，需要第二次点击才能修正状态。
- 事件绑定的时机不当，比如在DOM未完全加载完成时绑定事件，或者重复绑定事件，导致首次点击时事件未正常触发。
优化前的示例代码
以下是一段存在问题的侧边栏菜单实现代码，首次加载折叠后需要双击才能展开：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侧边栏菜单示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.sidebar {
width: 200px;
background: #f0f0f0;
height: 100vh;
}
.menu-item {
padding: 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.sub-menu {
display: none;
padding-left: 20px;
}
.sub-menu li {
padding: 8px 0;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="menu-item">菜单1</div>
<ul class="sub-menu">
<li>子菜单1-1</li>
<li>子菜单1-2</li>
</ul>
<div class="menu-item">菜单2</div>
<ul class="sub-menu">
<li>子菜单2-1</li>
<li>子菜单2-2</li>
</ul>
</div>
<script>
// 问题代码：初始状态标记错误，默认折叠但标记为已展开
let isExpand = true;
$(function() {
// 重复绑定事件，导致首次点击逻辑异常
$('.menu-item').click(function() {
if (isExpand) {
$(this).next('.sub-menu').slideUp();
isExpand = false;
} else {
$(this).next('.sub-menu').slideDown();
isExpand = true;
}
});
});
</script>
</body>
</html>
优化方案与实现
针对上述问题，优化需要从状态初始化和事件绑定两方面入手：
1. 修正初始状态标记
菜单默认折叠时，状态标记应该设置为false，和实际DOM状态保持一致，避免逻辑判断反向。
2. 优化事件绑定逻辑
使用data()方法为每个菜单项单独存储展开状态，避免多个菜单项共用同一个状态变量导致的逻辑混乱，同时避免重复绑定事件。
3. 完整优化代码
以下是修正后的完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>优化后的侧边栏菜单</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.sidebar {
width: 200px;
background: #f0f0f0;
height: 100vh;
}
.menu-item {
padding: 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.sub-menu {
display: none;
padding-left: 20px;
}
.sub-menu li {
padding: 8px 0;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="menu-item">菜单1</div>
<ul class="sub-menu">
<li>子菜单1-1</li>
<li>子菜单1-2</li>
</ul>
<div class="menu-item">菜单2</div>
<ul class="sub-menu">
<li>子菜单2-1</li>
<li>子菜单2-2</li>
</ul>
</div>
<script>
$(function() {
// 为每个菜单项初始化展开状态，默认折叠为false
$('.menu-item').each(function() {
$(this).data('isExpand', false);
});
// 单次绑定点击事件，每个菜单项独立判断状态
$('.menu-item').click(function() {
let $this = $(this);
let isExpand = $this.data('isExpand');
if (isExpand) {
$this.next('.sub-menu').slideUp();
$this.data('isExpand', false);
} else {
// 可选：关闭其他展开的菜单
$('.menu-item').next('.sub-menu').slideUp();
$('.menu-item').data('isExpand', false);
$this.next('.sub-menu').slideDown();
$this.data('isExpand', true);
}
});
});
</script>
</body>
</html>
优化后的效果验证
加载优化后的代码，首次进入页面时菜单默认处于折叠状态，点击任意菜单项即可直接展开子菜单，不需要双击操作，完全符合用户的交互预期。如果后续需要默认展开某个菜单，只需要将该菜单项对应的data('isExpand')初始值设置为true，同时调用slideDown()方法即可，逻辑依然保持正确。