下拉菜单交替点击显隐异常，第三次点击重复展开，如何恢复默认结构？

兄弟，你的这个问题我太熟了！大概率是每次点击都在重复生成/追加下拉列表内容，而不是单纯切换已有列表的显示/隐藏状态，所以第三次点击就多出了一份下拉项。另外也有可能是点击事件被重复绑定，导致一次点击触发多次操作。下面给你几个靠谱的修复方案：

方案1：用jQuery的toggle()直接切换显示隐藏（最省心） #

如果你的下拉菜单是已经提前写在DOM里的，只是默认隐藏，那直接用toggle()方法就能实现点击切换，完全不会出现重复的问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 默认隐藏下拉列表 */
.dropdown-list {
    display: none;
    margin: 10px 0;
    padding-left: 20px;
}
</style>
</head>
<body>
<button class="dropdown-btn">点击展开/收起菜单</button>
<ul class="dropdown-list">
    <li>菜单选项1</li>
    <li>菜单选项2</li>
    <li>菜单选项3</li>
</ul>

<script>
// 只绑定一次点击事件，切换列表的显示与隐藏
$('.dropdown-btn').on('click', function() {
    $('.dropdown-list').toggle();
});
</script>
</body>
</html>

方案2：动态生成时避免重复创建 #

如果你的下拉列表是需要动态生成的，那每次点击前先检查列表是否已经存在：存在就切换显示，不存在再创建新的，这样就不会重复生成了：

$('.dropdown-btn').on('click', function() {
    var $targetList = $('.dropdown-list');
    // 检查列表是否已存在
    if ($targetList.length === 0) {
        // 不存在就创建新列表并插入到按钮后面
        var newDropdown = $('<ul class="dropdown-list"><li>动态选项1</li><li>动态选项2</li></ul>');
        $(this).after(newDropdown);
    } else {
        // 已存在就切换显示状态
        $targetList.toggle();
    }
});

方案3：解决重复绑定事件的问题 #

如果是因为代码被重复执行（比如在某个循环里绑定事件），导致同一个按钮被绑定了多次点击事件，那可以先解绑再绑定，确保每次只有一个事件生效：

// 先解绑之前的点击事件，再绑定新的
$('.dropdown-btn').off('click').on('click', function() {
    $('.dropdown-list').toggle();
});

核心思路就是：不要每次点击都生成新的下拉内容，要么提前写好DOM只切换显示，要么动态生成时做存在性检查，同时避免事件重复绑定。

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