jQuery移动端适配：如何避免执行switch中的特定代码行

嘿，我完全懂你现在的处境——同一个switch逻辑要兼顾桌面和移动端，但有些样式代码在移动端就是不想让它跑，还得让checkif()里的样式优先级更高。下面给你几个实用的思路，你可以根据自己的项目复杂度选：

方案1：在switch内直接判断移动端，跳过指定代码 #

最直接的改法就是把你判断移动端的逻辑抽成一个可复用的函数，然后在不想执行的代码前加个判断，只有非移动端才运行这部分代码。最后每次点击后都调用checkif()，确保移动端的样式能及时生效。

// 抽离移动端判断逻辑，方便复用
function isMobile() {
  return $(".scroller").css("display") === "none";
}

// 导航点击事件
$(".nav").click(function(event) {
    var what = event.target.className;
    switch (what){
        case "item 1":
            const text1 = $(".text1");
            if (text1.css("display") === "none"){
                text1.css("display", "block");
                // 仅非移动端执行此行及其他桌面端专属样式
                if (!isMobile()) {
                    $(".item5").css("margin-top","196px");
                    // 这里可以加其他桌面端独有的样式修改
                }
            } else {
                text1.css("display", "none");
                if (!isMobile()) {
                    $(".item5").css("margin-top","0");
                    // 其他桌面端样式重置
                }
            }
            // 每次点击后强制执行移动端样式逻辑，确保覆盖
            checkif();
            break;
        // 其他case分支同理处理
    }
});

// 移动端样式调整函数
function checkif(){
    if (isMobile()){
        $(".item5").insertAfter($(".item12"));
        if($(".text1").css("display") === "block"){
            $(".item5").css("margin-top","0");
        }
    }
}

方案2：用CSS类代替行内样式，利用优先级覆盖 #

更推荐的做法是把样式逻辑从JavaScript里剥离出来，交给CSS管理，这样不仅代码更清晰，还能利用CSS媒体查询的优先级自动覆盖桌面端样式，避免JS里大量的样式判断。

首先写CSS：

/* 桌面端样式类 */
.item5--desktop-expanded {
  margin-top: 196px;
  /* 这里可以加其他桌面端专属样式，比如颜色、文本调整等 */
}
.item5--reset {
  margin-top: 0;
}

/* 移动端媒体查询（假设断点为768px，根据你的项目调整） */
@media (max-width: 768px) {
  .item5--desktop-expanded {
    margin-top: 0 !important; /* 或者不用!important，只要媒体查询的样式写在后面就能覆盖 */
    /* 其他移动端需要覆盖的样式 */
  }
}

然后修改JavaScript，只负责添加/移除类：

$(".nav").click(function(event) {
    var what = event.target.className;
    switch (what){
        case "item 1":
            const text1 = $(".text1");
            const item5 = $(".item5");
            if (text1.css("display") === "none"){
                text1.css("display", "block");
                item5.addClass("item5--desktop-expanded").removeClass("item5--reset");
            } else {
                text1.css("display", "none");
                item5.addClass("item5--reset").removeClass("item5--desktop-expanded");
            }
            checkif();
            break;
    }
});

function checkif(){
    if ($(".scroller").css("display") === "none" ){
        $(".item5").insertAfter($(".item12"));
        if($(".text1").css("display") === "block"){
            $(".item5").addClass("item5--reset").removeClass("item5--desktop-expanded");
        }
    }
}

这个方案的好处是关注点分离：JS管交互逻辑（显示/隐藏文本、切换类），CSS管具体样式，后期维护样式的时候不用动JS，非常方便。

方案3：拆分移动端与桌面端的交互逻辑 #

如果你的项目后期会有更多移动端专属交互，可以给body加一个标记类，根据屏幕尺寸动态切换，然后JS根据这个类执行不同的逻辑：

/* CSS媒体查询，给body添加移动端标记类 */
@media (max-width: 768px) {
  body.is-mobile {
    /* 这里可以加移动端基础样式，主要是给JS做判断标记 */
  }
}

// 动态更新body的移动端类
function updateMobileStatus() {
  // 可以用窗口宽度判断，或者你原来的.scroller判断逻辑
  const isMobile = $(".scroller").css("display") === "none";
  $("body").toggleClass("is-mobile", isMobile);
}

// 初始化和窗口 resize 时更新
updateMobileStatus();
$(window).resize(updateMobileStatus);

$(".nav").click(function(event) {
    var what = event.target.className;
    const isMobile = $("body").hasClass("is-mobile");
    
    switch (what){
        case "item 1":
            const text1 = $(".text1");
            if (text1.css("display") === "none"){
                text1.css("display", "block");
                if (!isMobile) {
                    // 桌面端专属逻辑
                    $(".item5").css("margin-top","196px");
                } else {
                    // 移动端专属逻辑（如果有的话）
                }
            } else {
                text1.css("display", "none");
                if (!isMobile) {
                    $(".item5").css("margin-top","0");
                }
            }
            checkif();
            break;
    }
});

function checkif(){
    if ($("body").hasClass("is-mobile")){
        $(".item5").insertAfter($(".item12"));
        if($(".text1").css("display") === "block"){
            $(".item5").css("margin-top","0");
        }
    }
}

这个方案适合后期有大量移动端专属交互的场景，逻辑拆分更清晰。

内容的提问来源于stack exchange，提问作者Rodrigo Nava Ramirez