移动端折叠展开加减号功能正常，桌面端无法隐藏如何解决

云上老周

2026-9-25

问题根因

JS代码中初始化的if (windowWidth <= 768)判断没有加花括号，只有紧随其后的jQuery('.panel-collapse').removeClass('in')属于移动端判断逻辑，下一行的加减号切换代码在所有设备上都会执行，覆盖了你默认的display: none隐藏样式
点击toggle-menu的交互逻辑没有做设备宽度判断，桌面端点击时仍会触发加减号的toggle显示逻辑

修复方案

优先用CSS媒体查询做样式控制，更稳定不受JS执行时机影响：

1. 新增CSS代码

/* 桌面端直接隐藏加减号，优先级足够高不会被JS的内联样式覆盖 */
@media screen and (min-width: 769px) {
  .plus, .minus {
    display: none !important;
  }
}

2. 修正JS逻辑

把初始化时的if逻辑加上花括号，同时点击事件里加宽度判断，避免桌面端执行没必要的加减号切换：

jQuery(document).ready(function() {
  var windowWidth = jQuery(window).width();
  // 给if加花括号，只有移动端执行初始化逻辑
  if (windowWidth <= 768) {
    jQuery('.panel-collapse').removeClass('in');
    $(".day-header").find(".plus,.minus").toggle();
  }

  jQuery('.toggle-menu').click(function() {
    var target = $(this).data("target");
    $(target).toggleClass('in');
    // 仅移动端执行加减号切换
    if (jQuery(window).width() <= 768) {
      $(this).closest(".day-header").find(".plus,.minus").toggle();
    }
  });
  
  // 冗余代码可删除，不需要单独给加减号加点击隐藏逻辑
  // $(".minus,.plus").click(function() {
  //   $(this).hide();
  // });
});