$(document).ready(function() { /*------------------------- heroheader -------------------------*/ $(".hamburger").click(function(){ $(".navbox").addClass("show"); }); $(".close_hamburger").click(function(){ $(".navbox").removeClass("show"); }); $(".dropBt").on('click',function(e) { e.preventDefault(); $(this) .siblings(".haveDrop") .toggleClass("open"); $(this) .closest(".toggleIcon") .toggleClass("closebt"); $(this) .parent() .siblings() .find(".dropBt") .removeClass("active"); $(this) .parent() .siblings() .find(".haveDrop") .removeClass("open"); $(this) .parent() .siblings() .find(".toggleIcon") .removeClass("closebt"); }); $(".navbox").on('mouseleave', function() { // 移除之前添加的类 $(".haveDrop").removeClass("open"); $(".toggleIcon").removeClass("closebt"); $(".dropBt").removeClass("active"); }); $(".mod-language").click(function () { $(".language-content").toggle(200); }); $(".mod-language").on('mouseleave', function() { $(".language-content").hide(200); }); $(".mod-message").click(function () { $(".message-content").toggle(200); }); $(".mod-message").on('mouseleave', function() { $(".message-content").hide(200); }); $(".lineshare").click(function () { $(".lineshare-content").toggle(200); }); $(".lineshare").on('mouseleave', function() { $(".lineshare-content").hide(200); }); $(".membernav").click(function () { $(".lists").toggle(200); }); // $(".membernav").on('mouseleave', function() { // $(".lists").hide(200); // }); $(".moreopen").click(function () { $(this).find('.more-inner').toggle(200); }); $(".ic_more").click(function () { $(".sidenav").toggle(200); }); $('.ringopen').click(function() { $(this).closest('.items').find('.drop').toggle(200); $(this) .parent().parent() .siblings() .find(".drop") .hide(200); $(this).closest('.items').find('.ringopen').toggleClass('show'); $(this) .parent().parent() .siblings() .find(".ringopen") .removeClass('show'); }); $('.titleopen').click(function() { $(this).parent().find('.drop').toggle(200); $(this) .parent().parent() .siblings() .find(".drop") .hide(200); $(this) .parent().parent() .siblings() .find(".ringopen") .removeClass('show'); }); /*------------------------- 首頁大圖輪撥 -------------------------*/ var swiper = new Swiper(".Swiperkv", { loop: true, centeredSlides: true, slidesPerView: 1, spaceBetween: 0, preloadImages: true, // 預加載圖片 updateOnImagesReady: true, // 圖片加載完成後更新 autoplay: { delay: 8000, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", clickable: true, }, on: { init: function () { this.update(); // 確保初始化後更新 }, }, }); var swiper = new Swiper(".indexSwiper1", { slidesPerView: 1, spaceBetween: 12, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", }, breakpoints: { 768: { slidesPerView: 3, spaceBetween: 20, }, }, }); var swiper = new Swiper(".indexSwiper2", { effect: "cards", grabCursor: true, centeredSlides: true, loop: true, }); var swiper = new Swiper(".indexSwiper3", { slidesPerView: 3, spaceBetween: 12, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", }, breakpoints: { 768: { slidesPerView: 6, spaceBetween: 20, }, }, }); /*------------------------- 首頁-tab選單 -------------------------*/ function setupTabs(tabClass, showTabIndex) { $(tabClass).each(function() { var $tab = $(this); var $defaultLi = $("ul.tabs li", $tab).eq(showTabIndex).addClass("active"); $($defaultLi.find("a").attr("href")).siblings().hide(); $("ul.tabs li", $tab).click(function() { var $this = $(this), _clickTab = $this.find("a").attr("href"); $this.addClass("active").siblings(".active").removeClass("active"); $(_clickTab).stop(false, true).fadeIn().siblings().hide(); return false; }).find("a").focus(function() { this.blur(); }); }); } // 第一個區塊 setupTabs(".p_tab1", 0); // 第二個區塊 setupTabs(".p_tab2", 0); // 第三個區塊 setupTabs(".p_tab3", 0); /*------------------------- 會員頁sidemenu當前頁面位置 -------------------------*/ $(".userNav a").each(function() { if ($(this).attr("href") == window.location.pathname.split("/")[1]) $(this).addClass("active"); }); /*------------------------- 類別選單 -------------------------*/ // var swiper = new Swiper(".categorySwiper", { // slidesPerView: 4, // spaceBetween: 12, // navigation: { // nextEl: ".swiper-button-next", // prevEl: ".swiper-button-prev", // }, // breakpoints: { // 640: { // slidesPerView: 5, // spaceBetween: 0, // }, // 720: { // slidesPerView: 12, // spaceBetween: 0, // }, // }, // }); // Initialize Swiper with auto width var swiper = new Swiper(".categorySwiper", { slidesPerView: 'auto', spaceBetween: 12, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, watchOverflow: true, }); // Function to check if navigation arrows should be displayed function checkNavigation() { const swiperWrapper = $(".categorySwiper .swiper-wrapper"); const swiperContainer = $(".categorySwiper"); // Calculate total width of all slides let totalSlidesWidth = 0; $(".categorySwiper .swiper-slide").each(function() { totalSlidesWidth += $(this).outerWidth(true); }); // Compare with container width and show/hide arrows if (totalSlidesWidth > swiperContainer.innerWidth() - 60) { // Subtract padding $(".swiper-button-next, .swiper-button-prev").show(); } else { $(".swiper-button-next, .swiper-button-prev").hide(); } } // Run on page load and window resize checkNavigation(); $(window).resize(function() { checkNavigation(); }); var swiper = new Swiper(".categorySwiper2", { slidesPerView: 2, spaceBetween: 12, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 680: { slidesPerView: 5, spaceBetween: 12, }, }, }); var swiper = new Swiper(".categorySwiper3", { slidesPerView: 2, spaceBetween: 1, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 640: { slidesPerView: 5, spaceBetween: 1, }, }, }); /*------------------------- lightbox -------------------------*/ $(".lightbox-close").click(function () { $(".lightbox-target").removeClass('lightboxopen'); }); $(".newmargin").click(function () { $(".lightbox-margin").addClass('lightboxopen'); }); $(".esgfuture").click(function () { $(".lightbox-esgfuture").addClass('lightboxopen'); }); /*------------------------- FAQ -------------------------*/ $("li.a").hide(); $("li.q").click(function() { //gets next element //opens .a of selected question $(this) .next() .slideToggle(500) //selects all other answers and slides up any open answer .siblings("li.a") .slideUp(); //Grab img from clicked question var img = $(this).children("i"); //Remove Rotate class from all images except the active $("i") .not(img) .removeClass("rotate"); //toggle rotate class img.toggleClass("rotate"); }); /*------------------------- 文章頁目錄 -------------------------*/ // For each chapter container $('.chapter').each(function() { const $chapter = $(this); const $list = $chapter.find('ul'); const $items = $list.find('li'); const $moreBtn = $chapter.find('.more'); // Initialize - hide the "more" button by default $moreBtn.hide(); // If there are more than 4 items if ($items.length > 3) { // Show the "more" button $moreBtn.show(); // Hide items beyond the 4th one $items.slice(3).hide(); // Set initial state $moreBtn.data('expanded', false); // Handle click on "more" button $moreBtn.on('click', function() { const isExpanded = $(this).data('expanded'); if (!isExpanded) { // Show all items $items.slice(3).show(); // Change button text to "收合" (collapse) $(this).html('收合'); // Add "open" class $(this).data('expanded', true); } else { // Hide items beyond the 4th one $items.slice(3).hide(); // Change button text back to "展開" (expand) $(this).html('更多...'); // Remove "open" class $(this).data('expanded', false); } }); } }); /*------------------------- 字級大小 -------------------------*/ var fontSizeIndex = 0; var maxFontSizeIndex = 3; $(".ic_fsize").on("click", function () { if (fontSizeIndex < maxFontSizeIndex) { fontSizeIndex++; $(".fsize").css("font-size", "+=1"); } else { // Reset font size to the original size or take another action as needed fontSizeIndex = 0; $(".fsize").css("font-size", "1em"); } }); /*------------------------- 訂閱下拉 -------------------------*/ // 預設隱藏 .subscribedrop $('.subscribedrop').hide(); // 點擊 .subscribe 時切換對應的 .subscribedrop $('.subscribebt').on('click', function (e) { e.stopPropagation(); // 防止冒泡 const container = $(this).closest('.mod-subscribe'); // 找到最近的包裹區塊 const drop = container.find('.subscribedrop'); // 找到對應的 drop // 收起其他展開的 $('.subscribedrop').not(drop).slideUp(); // 切換這一個 drop.slideToggle(); }); // 點擊 drop 本身不收合 $('.subscribedrop').on('click', function (e) { e.stopPropagation(); }); $('.subscribeclose').on('click', function () { $('.subscribedrop').slideUp(); }); // 點擊頁面其他地方時關閉所有 drop $(document).on('click', function () { $('.subscribedrop').slideUp(); }); /*------------------------- 標籤下拉 -------------------------*/ // 預設隱藏所有 tagdrop $('.tagdrop').hide(); // 點擊 tagbt 時的處理 $('.tagbt').click(function (e) { e.stopPropagation(); // 防止事件冒泡 // 取得目前點擊的對應 tagdrop const $currentDrop = $(this).siblings('.tagdrop'); // 如果目前這個 tagdrop 是顯示中,就收起它 if ($currentDrop.is(':visible')) { $currentDrop.slideUp(); } else { // 否則關閉所有,再開啟目前的 $('.tagdrop').slideUp(); $currentDrop.slideDown(); } }); // 點擊其他地方時關閉所有 tagdrop $(document).click(function () { $('.tagdrop').slideUp(); }); // 防止點擊 tagdrop 裡的內容時觸發 document 的關閉事件 $('.tagdrop').click(function (e) { e.stopPropagation(); }); /*------------------------- 文件ready ok jquery結束 -------------------------*/ });