点击分类后菜单无法折叠的问题排查与解决方案求助

当前遇到的问题是：点击分类菜单后，菜单无法再次折叠。即使给.first类添加.first-grid类，display: none属性依然生效，不得不使用!important来强制覆盖。

问题根源 #

1. jQuery的hide()/show()方法会给元素添加行内样式display: none/display: block，行内样式的优先级远高于类选择器，所以.first-grid的display: grid会被行内的display: none覆盖，只能用!important强行解决。
2. 点击切换逻辑有缺陷：toggleSecondVisibility函数只在.second的display为flex时触发切换，但没有处理行内样式的冲突，导致折叠功能失效。

修复方案 #

核心思路 #

用CSS类控制显示/隐藏，替代jQuery的hide()/show()方法，避免行内样式的优先级干扰；同时修正点击切换逻辑，确保菜单能正常展开/折叠。

修改后的完整代码 #

JavaScript

$(document).ready(function () {
var header = $(".menu-gift");
var sticky = header.offset().top;

function toggleSecondVisibility() {
  var second = $(".second");
  var first = $(".first");
  var arrow = $(".drop-arrow");
  
  second.click(function () {
    // 直接切换菜单显示状态和箭头旋转
    first.toggleClass("first-hidden first-grid");
    arrow.toggleClass("arrow-rotate");
    // 同步处理sticky状态下的显示冲突
    if (header.hasClass("sticky")) {
      first.toggleClass("first-hidden");
    }
  });
}

function FirstMenuChangeOrder(scrollPos) {
  if (window.innerWidth < 1199) {
    var first = $(".first");
    var second = $(".second");

    if (scrollPos > sticky) {
      header.addClass("sticky");
      // 用CSS类替代hide()/show()
      first.addClass("first-hidden").removeClass("first-grid");
      second.removeClass("first-hidden");
    } else {
      header.removeClass("sticky");
      first.removeClass("first-hidden");
      second.addClass("first-hidden");
    }
  }
}

function ChangeActiveOnScroll(scrollPos) {
  var mostGiftedTop = $("#most-gifted").offset().top;
  var initialJewelryTop = $("#initial-jewerly").offset().top;
  var multiNameTop = $("#multi-name").offset().top;
  var under150Top = $("#under-150").offset().top;

  $(".menu-gift .first a").removeClass("active");
  var choosenSection = $(".choosen-section");

  if (scrollPos >= under150Top) {
    $(".under-150 a").addClass("active");
    choosenSection.text("UNDER $150");
  } else if (scrollPos >= multiNameTop) {
    $(".multi-name a").addClass("active");
    choosenSection.text("MULTI-NAME");
  } else if (scrollPos >= initialJewelryTop) {
    $(".initial-jewerly a").addClass("active");
    choosenSection.text("INITIAL JEWELRY");
  } else if (scrollPos >= mostGiftedTop) {
    $(".most-gifted a").addClass("active");
    choosenSection.text("MOST GIFTED");
  }
}

function setupSmoothScroll() {
  $(".menu-gift .first a").click(function (e) {
    e.preventDefault();
    var targetId = $(this).attr("href");
    var targetPosition = $(targetId).offset().top - header.outerHeight() - 50;
    $("html, body").animate(
      {
        scrollTop: targetPosition,
      },
      600
    );
    // 点击选项后自动折叠菜单
    $(".first").addClass("first-hidden").removeClass("first-grid");
    $(".drop-arrow").removeClass("arrow-rotate");
  });
}

$(window).scroll(function () {
  var scrollPos = $(document).scrollTop() + 200;
  FirstMenuChangeOrder(scrollPos - 155);
  ChangeActiveOnScroll(scrollPos);
});

// 初始化状态
var initialScrollPos = $(document).scrollTop() + 200;
FirstMenuChangeOrder(initialScrollPos - 155);
ChangeActiveOnScroll(initialScrollPos);
toggleSecondVisibility();
setupSmoothScroll();
});

CSS

.first {
  background: black;
  color: white;
  display: grid;
  row-gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 16px 20px;
  transition: all 0.3s ease;
  @media (min-width: 1200px) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
}
.first-grid {
  order: 2;
  display: grid;
}
/* 自定义隐藏类，替代jQuery的hide() */
.first-hidden {
  display: none !important;
}
.second {
  display: none;
  @media (max-width: 1199px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: black;
    color: white;
    cursor: pointer;
  }
}
.arrow-rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="menu-gift">
    <div class="first">
      <span class="most-gifted"
        ><a class="active" href="#most-gifted">MOST GIFTED</a></span
      >
      <span class="initial-jewerly"
        ><a href="#initial-jewerly">INITAL JEWERLY</a></span
      >
      <span class="multi-name"><a href="#multi-name">MULTI NAME</a></span>
      <span class="under-150"><a href="#under-150">UNDER $150</a></span>
      <span><a href="">UNDER $250</a></span>
      <span><a href="">FINE JEWELRY</a></span>
    </div>
    <div class="second">
      <span class="you-choose">Gift guide:</span>
      <span class="choosen-section">MOST GIFTED</span>
      <img
        class="drop-arrow"
        src="https://cdn.myka.com/digital-asset/banners/drop-down-arrow-gift-guide.svg" />
    </div>
</div>

关键修改点说明 #

• 新增.first-hidden类，完全替代jQuery的hide()/show()，避免行内样式干扰
• 点击.second时，直接切换.first的显示类，同时处理sticky状态下的样式冲突
• 点击菜单选项后自动折叠菜单，优化用户体验
• 移除了.first-grid中的!important，改用类优先级控制样式，代码更健壮

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