jQuery中如何让点击函数执行后重置可重复触发，是否有类似C语言goto的方法？

问题原因 #

你现在的写法核心问题是嵌套绑定click事件：第一次点击元素后，你在回调函数里又给同一个元素绑定了第二个click处理逻辑，之后每次点击都会同时触发多个绑定的回调，逻辑自然会乱，也没法正常回到初始状态切换。
另外jQuery本身没有提供类似C语言的goto语法，前端开发也不推荐使用这类跳转逻辑，会大幅提升代码维护成本，你的需求用状态切换的方案就可以完美实现。

实现方案 #

方案1：用状态变量标记当前状态 #

通过一个变量标记当前是展开/收起状态，每次点击判断状态后执行对应逻辑：

// 初始为收起状态
let isExpanded = false;
$(".ccs .fa-chevron-down").click(function(){
    if (!isExpanded) {
        // 展开逻辑
        $(".gorunmez").css("visibility", "visible");
        $(".ccs").css("transform", "translate(0%, -80%)");
        $(this).css({
            "transform": "rotate(180deg)",
            "transition": "0.3s"
        });
    } else {
        // 收起逻辑
        $(".ccs").css("transform", "translate(0%,-50%)");
        $(this).css({
            "transform":"rotate(0deg)",
            "transition": "0.3s"
        });
        $(".gorunmez").css("visibility", "hidden");
    }
    // 切换状态
    isExpanded = !isExpanded;
});

方案2：用CSS类切换（更推荐） #

把状态样式和逻辑分离，用toggleClass自动切换状态，代码更简洁易维护：
首先预先定义好CSS样式：

/* 初始状态 */
.ccs {
    transform: translate(0%, -50%);
    transition: 0.3s;
}
.gorunmez {
    visibility: hidden;
}
.ccs .fa-chevron-down {
    transition: 0.3s;
}
/* 展开状态 */
.ccs.expanded {
    transform: translate(0%, -80%);
}
.gorunmez.expanded {
    visibility: visible;
}
.ccs .fa-chevron-down.expanded {
    transform: rotate(180deg);
}

JS逻辑只需一行就能实现切换：

$(".ccs .fa-chevron-down").click(function(){
    $(".ccs, .gorunmez, .ccs .fa-chevron-down").toggleClass("expanded");
});

以上两种方案都支持无限次点击切换，每次都会完整执行对应状态的逻辑，符合你的需求。

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