如何用jQuery将修改Div尺寸的按钮改为长按3秒触发的按钮？

针对你的需求，只需要给.view-toggle按钮添加长按事件逻辑即可，原有汉堡菜单的点击功能保持不变。以下是修改后的代码：

完整代码 #

HTML（无需修改） #

<div class="burger-container">
<button class="navbar-toggle navbar-toggle-overlay burger" type="button">
<span class="sr-only">Toggle navigation</span>
</button>
<button class="view-toggle">
<span class="slider-icon"></span>
</button>
</div>

JavaScript（新增长按逻辑） #

// 保留原有汉堡菜单点击逻辑
$(document).on("click", ".navbar-toggle-overlay", function() {
    var a = $(this),
        d = $(".overlay-menu");
    if (d.is(":visible")) {
        a.removeClass("active");
        d.fadeOut();
        c();
        $(".nav-container .image, .view-toggle").removeClass("white");
        $(".project").removeClass("hidden");
    } else {
        a.addClass("active");
        d.fadeIn();
        b();
        $(".project").addClass("hidden");
        $(".nav-container .image, .view-toggle").addClass("white");
    }
});

// 长按按钮逻辑：3秒后触发修改Div尺寸功能
let longPressTimer;

// 鼠标按下时启动定时器
$(document).on("mousedown", ".view-toggle", function() {
    longPressTimer = setTimeout(() => {
        // 替换为你实际修改Div尺寸的代码
        // 示例：修改目标Div的宽高
        // $(".your-target-div").css({ width: "600px", height: "400px" });
        console.log("长按3秒，执行修改Div尺寸操作");
    }, 3000);
});

// 鼠标松开或离开按钮时，清除定时器终止触发
$(document).on("mouseup mouseleave", ".view-toggle", function() {
    clearTimeout(longPressTimer);
});

逻辑说明 #

• 当用户按下.view-toggle按钮时，启动一个3秒的定时器；
• 如果用户按住按钮满3秒，定时器到期后执行修改Div尺寸的逻辑；
• 如果用户中途松开按钮或者鼠标离开按钮区域，会立即清除定时器，避免误触发；
• 原有汉堡菜单的点击功能不受任何影响。

内容的提问来源于stack exchange，提问作者A.Amiri