Требование сворачивания меню при выборе категории ⇐ Jquery

[Гость]

В настоящее время я столкнулся с проблемой повторного свертывания меню после щелчка по категории. Я подозреваю, что проблема заключается в том, что свойство «display: none» сохраняется даже тогда, когда «первому» классу присвоен класс «first-grid». Это заставляет меня использовать объявление стиля «!important», чтобы переопределить его. Сможете ли вы оказать помощь в поиске решения этой проблемы?

Код: Выделить всё

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

function toggleSecondVisibility() {
var second = $(".second");
second.click(function () {
var first = $(".first");
if (second.css("display") === "flex") {
var arrow = $(".drop-arrow");
first.toggleClass("first-grid");
arrow.toggleClass("arrow-rotate");
}
});
}

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

if (scrollPos > sticky) {
header.addClass("sticky");
first.hide();
second.show();
} else {
header.removeClass("sticky");
first.show();
second.hide();
}
}
}

function ChangeActiveOnScroll(scrollPos) {
// Top positions of all sections
var mostGiftedTop = $("#most-gifted").offset().top;
var initialJewelryTop = $("#initial-jewerly").offset().top;
var multiNameTop = $("#multi-name").offset().top; // Assuming you have sections with class 'multi-name'
var under150Top = $("#under-150").offset().top; // Assuming you have sections with class 'under-150'

// Remove 'active' class from all navigation links
$(".menu-gift .first a").removeClass("active");

// Element to display the name of the active section
var choosenSection = $(".choosen-section");

// Check the current scroll position against section top positions and update accordingly
if (scrollPos >= under150Top) {
// If scroll position is at or below "Under $150"
$(".under-150 a").addClass("active");
choosenSection.text("UNDER $150");
} else if (scrollPos >= multiNameTop) {
// If scroll position is at or below "Multi-Name"
$(".multi-name a").addClass("active");
choosenSection.text("MULTI-NAME");
} else if (scrollPos >= initialJewelryTop) {
// If scroll position is at or below "Initial Jewelry"
$(".initial-jewerly a").addClass("active");
choosenSection.text("INITIAL JEWELRY");
} else if (scrollPos >= mostGiftedTop) {
// If scroll position is at or below "Most Gifted"
$(".most-gifted a").addClass("active");
choosenSection.text("MOST GIFTED");
}
// Continue with more sections if needed
}

function setupSmoothScroll() {
$(".menu-gift .first a").click(function (e) {
e.preventDefault(); // Prevent default anchor click behavior
var targetId = $(this).attr("href");
var targetPosition = $(targetId).offset().top - header.outerHeight() - 50; // Adjust if you have a sticky header
$("html, body").animate(
{
scrollTop: targetPosition,
},
600
);  // 600ms scroll animation
});
}

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

// Initial state checks
var initialScrollPos = $(document).scrollTop() + 200;
var initialScrollPosNoOffset = $(document).scrollTop();
FirstMenuChangeOrder(initialScrollPos - 155);
ChangeActiveOnScroll(initialScrollPos);
toggleSecondVisibility();
setupSmoothScroll();
});

Код: Выделить всё

.first {
background: black;
color: white;
display: grid;
row-gap: 16px;
grid-template-columns: 1fr 1fr 1fr;
padding: 16px 20px;
@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 !important;
}

Код: Выделить всё

[url=#most-gifted]MOST GIFTED[/url]
[url=#initial-jewerly]INITAL JEWERLY[/url]
[url=#multi-name]MULTI NAME[/url]
[url=#under-150]UNDER $150[/url]
UNDER $250
FINE JEWELRY

Gift guide:
MOST GIFTED
[img]https://cdn.myka.com/digital-asset/banners/drop-down-arrow-gift-guide.svg[/img]

Чтобы лучше понять, это выглядит так



Подробнее здесь: https://stackoverflow.com/questions/782 ... -selection