我只想在螢屏尺寸小于 768 像素時添加滑動切換。當用戶出于某種原因手動調整視窗大小時，我也希望它能夠作業。
我遇到了 jQuery 的一個錯誤，在我調整視窗大小后，我的下拉選單會不斷切換。我查找了這個問題并嘗試添加 return false; 點擊功能并添加位置：相對；溢位：隱藏；切換到可切換的 div（根據某些論壇，這些應該是一種解決方法）。那里沒有運氣。是什么導致了這個錯誤。我將在 click 函式中包含整個函式
//Call function on ready and window resize
$(document).ready(navigationMobile);
$(window).on('resize', navigationMobile);
function navigationMobile() {
const windowWidth = $(window).width();
if (windowWidth < 768) {
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(".js-second-title").click(function () {
$(this).siblings('.js-menu').slideToggle();
$(this).toggleClass('js-open');
});
} else {
//Add href back to main link
$('.js-second-title').each(function () {
if ($(this).attr('href') === undefined) {
const allHref = $(this).siblings('ul').find('.js-all-link').attr('href');
$(this).attr('href', `${allHref}`);
$(this).siblings('ul').find('.js-all-link').remove();
}
});
}
}
干杯!
uj5u.com熱心網友回復：
我不完全知道是什么導致了這個錯誤。但我想出了這個解決方法。
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
$(this).addClass('js-closed');
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(document).on("click", '.js-second-title.js-closed', function (e) {
$(this).removeClass('js-closed');
$(this).siblings('.js-menu').slideDown();
$(this).addClass('js-open');
});
$(document).on("click", '.js-second-title.js-open', function (e) {
$(this).siblings('.js-menu').slideUp();
$(this).removeClass('js-open');
$(this).addClass('js-closed');
});
所以這里我基本上是在擴展 SlideToggle 功能。在單擊單擊呼叫幻燈片函式之前，我為每個 js-second-title 類提供了一個額外的類 .js-close ，以便瀏覽器知道選單已關閉。之后，當我單擊關閉的選單標題時呼叫 slideDown 函式，當我單擊打開的選單標題時呼叫 slideUp 函式。
我不認為這是最好或最有意義的解決方案，所以我想保持這個話題開放。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/525640.html