https://fujimino-west-clinic.com/js/jQ.js

1// JavaScript Document
2
3jQuery(document).ready(function () {
4  $("#keyvsl").css("opacity", "1");
5
6  //ウィンドウサイズ変更対応
7$(window).on("load resize", function () {
8  const isUnder48em = window.matchMedia("(max-width: 47.999em)").matches;
9  const isIpad = /iPad|Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;
10  const isSmartphone = isUnder48em && !isIpad;
11
12  // === 一旦リセット ===
13  $("#nav").removeClass("open sp_nav");
14  $("#menu .fixed_menu_btn").removeClass("active");
15  $(".sub").removeClass("close");
16  $(".subnav").stop(true, true).hide(); // アニメーション中止して即時非表示
17  $(".overlay").removeClass("open");
18  $("body").css("overflow", "auto");
19  $("#nav").css("display", ""); // ブロック・非表示などはCSSに任せる
20
21  // === 状態適用 ===
22  if (isSmartphone) {
23    $("#nav").addClass("sp_nav").css("transition", "all 0.8s");
24  } else {
25    $("#nav").css("transition", "0");
26  }
27});
28
29// SPメニュー
30let isAnimating = false;
31const transitionDuration = 500; // トランジション時間
32
33function closeSpMenu() {
34  if (isAnimating) return;
35  isAnimating = true;
36
37  $(".fixed_menu_btn").removeClass("active");
38  $("#nav").removeClass("open");
39  $(".overlay").removeClass("open");
40  $("body").css("overflow", "auto");
41
42  setTimeout(function () {
43    $("#nav").css("display", "none");
44    isAnimating = false;
45  }, transitionDuration);
46}
47
48$("#menu .fixed_menu_btn").on("click", function () {
49  if (isAnimating) return;
50
51  if ($(this).hasClass("active")) {
52    // 閉じる
53    closeSpMenu();
54  } else {
55    // 開く
56    isAnimating = true;
57    $(this).addClass("active");
58    $("#nav").css("display", "block");
59
60    setTimeout(function () {
61      $("#nav").addClass("open");
62      $(".overlay").addClass("open");
63      $("body").css("overflow", "hidden");
64      isAnimating = false;
65    }, 10);
66  }
67});
68
69$(".overlay").on("click", function () {
70  closeSpMenu();
71});
72
73$("#nav a").on("click", function () {
74  if ($("#nav").hasClass("sp_nav")) {
75    closeSpMenu();
76  }
77});
78
79  //PCグローバルメニュー固定
80  $(window).on("load orientationchange", function () {
81    var windowWidth = $(window).width();
82    var windowSm = 768;
83    if (windowWidth >= windowSm) {
84      // pcの場合
85      var navPos = $("#nav").offset().top; // グローバルメニューの位置
86
87      $(window).on("scroll load", function () {
88        if ($(this).scrollTop() > navPos) {
89          $("#nav").addClass("fixed", 1000);
90        } else {
91          $("#nav").removeClass("fixed");
92        }
93
94        const element = document.querySelector("#nav");
95        window.addEventListener("scroll", () => {
96          element.style.left = -window.pageXOffset + "px";
97        });
98      });
99    }
100  });
101
102  // 電話番号
103  if (navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)) {
104    $(".js-tel").each(function () {
105      var str = $(this).html();
106      if ($(this).children().is("img")) {
107        $(this).html(
108          $("<a>")
109            .attr(
110              "href",
111              "tel:" + $(this).children().attr("alt").replace(/-/g, "")
112            )
113            .append(str + "</a>")
114        );
115      } else {
116        $(this).html(
117          $("<a>")
118            .attr("href", "tel:" + $(this).text().replace(/-/g, ""))
119            .append(str + "</a>")
120        );
121      }
122    });
123  }
124
125  // トップ　キービジュアル背景
126  $("#keyvsl").slick({
127    autoplay: true, // 自動再生
128    autoplaySpeed: 4000, // 再生間隔（ミリ秒）
129    speed: 2000, // フェード速度
130    fade: true, // フェードイン/アウト
131    infinite: true, // 無限ループ
132    arrows: false, // 矢印を非表示
133    dots: false, // ドットナビゲーションを非表示
134    pauseOnHover: false, // ホバー時に一時停止しない
135    pauseOnFocus: false, // フォーカス時に一時停止しない
136  });
137
138     //カレンダータブ
139  // 最初のタブをアクティブにする
140  $(".tab:first").addClass("active");
141  $("#tab1").addClass("active");
142
143  // タブがクリックされたときの処理
144  $(".tab").click(function () {
145    // すべてのタブを非アクティブにし、クリックされたタブをアクティブにする
146    $(".tab").removeClass("active");
147    $(this).addClass("active");
148
149    // すべてのコンテンツを非表示にし、クリックされたタブに対応するコンテンツを表示する
150    $(".tab-content").removeClass("active");
151    $("#" + $(this).data("tab")).addClass("active");
152  });
153
154  // トップ　お知らせ　アコーディオン
155 // DOM変更を監視する共通関数
156function watchDOM(selector, callback) {
157  const observer = new MutationObserver(() => {
158    callback(); // 指定された処理を実行
159  });
160
161  const container = $(selector)[0];
162
163  if (container) {
164    observer.observe(container, {
165      childList: true,  // 子要素の追加・削除を監視
166      subtree: true     // 孫要素以下の変更も監視
167    });

168  }
169}
170function initAccordion() {
171  // 最初の3つを開く
172  $('.accordion-item').each(function(index) {
173    if (index < 3) {
174      $(this).prop('open', true).addClass('open');
175    }
176  });
177
178  // クリックイベント設定（重複登録を防ぐ）
179  $('.accordion-item').off('toggle.accordion').on('toggle.accordion', function() {
180    $(this).toggleClass('open', this.open);
181  });
182}
183
184// 適用
185$(function() {
186  initAccordion(); // 初回用
187  watchDOM('[data-styled]', initAccordion); // Vueで生成されたHTMLにも対応
188});
189
190//料金表アコーディオン
191  $(".tbl-switch").click(function () {
192    $(this).toggleClass("open").next("div").slideToggle();
193  });
194
195  // クリニック紹介ギャラリー
196  function setupSlider(mainSliderID, thumbnailSliderID) {
197    const slidesToShow = $(thumbnailSliderID).data("slides") || 4; // `data-slides`から取得（デフォルト4）
198    //< id="thumbnail_slider01" data-slides="5">のように設定する
199    $(mainSliderID).slick({
200      autoplay: false,
201      infinite: false,
202      speed: 600,
203      arrows: false,
204      asNavFor: thumbnailSliderID,
205    });
206
207    $(thumbnailSliderID).slick({
208      slidesToShow: slidesToShow,
209      infinite: false,
210      speed: 600,
211      asNavFor: mainSliderID,
212    });
213
214    $(thumbnailSliderID + " .slick-slide").on("click", function () {
215      var index = $(this).attr("data-slick-index");
216      $(thumbnailSliderID).slick("slickGoTo", index, false);
217    });
218  }
219
220  // IDに法則性を持たせてスライダーを設定
221  var i = 1;
222  while ($("#slider" + ("0" + i).slice(-2)).length) {
223    var mainSliderID = "#slider" + ("0" + i).slice(-2);
224    var thumbnailSliderID = "#thumbnail_slider" + ("0" + i).slice(-2);
225    setupSlider(mainSliderID, thumbnailSliderID);
226    i++;
227  }
228
229  // PC 診療内容ドロップダウンメニュー
230 function setupNavDropdown() {
231  const windowWidth = $(window).width();
232  const windowSm = 768;
233
234  $(".sub").off("click"); // まず既存イベントを削除（重複防止）
235
236  if (windowWidth >= windowSm) {
237    // PCの場合
238    $("#nav .subnav").hide();
239    $("#nav .sub").on("click", function (e) {
240      e.stopPropagation(); // 親への伝播を止める
241      $(this)
242        .toggleClass("close")
243        .next(".subnav")
244        .css("visibility", "visible")
245        .slideToggle();
246
247      $("#nav .sub")
248        .not($(this))
249        .removeClass("close")
250        .next(".subnav")
251        .hide();
252
253      return false;
254    });
255
256    $(window).on("click.navClose", function () {
257      if ($("#nav .subnav").is(":visible")) {
258        $("#nav .sub").removeClass("close");
259        $("#nav .subnav").hide();
260      }
261    });
262  } else {
263    // スマホ用
264    $("#nav .sub").on("click", function () {
265      $(this).toggleClass("close").next(".subnav").slideToggle();
266    });
267
268    $(window).off("click.navClose"); // PC用クリック閉じを無効に
269  }
270}
271
272// 初期化 & リサイズ対応
273$(function () {
274  setupNavDropdown();
275  $(window).on("resize", setupNavDropdown);
276});
277
278  //モーダルウィンドウ
279  // Show Modal
280  $(".modal-trigger").on("click", function (e) {
281    e.preventDefault();
282    var target = $(this).data("target");
283    var $modal = $("#" + target);
284
285    // モーダルと背景を表示
286    $modal.fadeIn();
287
288    // 他の要素を操作不可にする
289    $("body").css("overflow", "hidden"); // スクロールを無効化
290    $("*").not($modal).css("pointer-events", "none"); // モーダル以外の要素を操作不可にする
291    $modal.add($modal.find("*")).css("pointer-events", "auto"); // モーダル内は操作可能にする
292
293    // .overview の z-index を 2000 に設定
294    $(".overview").css("z-index", 2000);
295  });
296
297  // Close Modal
298  $(".modal-close").on("click", function () {
299    var $modal = $(this).closest(".modal");
300
301    // モーダルを非表示
302    $modal.fadeOut();
303
304    // 他の要素の操作を有効化
305    $("body").css("overflow", "auto"); // スクロールを有効化
306    $("*").css("pointer-events", ""); // 全ての要素の操作を元に戻す
307
308    // .overview の z-index を auto に戻す
309    $(".overview").css("z-index", "auto");
310  });
311

312  // Close Modal on Background Click
313  $(".modal").on("click", function (e) {
314    if ($(e.target).is(".modal")) {
315      var $modal = $(this);
316
317      // モーダルを非表示
318      $modal.fadeOut();
319
320      // 他の要素の操作を有効化
321      $("body").css("overflow", "auto"); // スクロールを有効化
322      $("*").css("pointer-events", ""); // 全ての要素の操作を元に戻す
323
324      // .overview の z-index を auto に戻す
325      $(".overview").css("z-index", "auto");
326    }
327  });
328
329  // スムーズスクロール
330  $(".scr").click(function () {
331    var speed = 500;
332    var href = $(this).attr("href");
333    var target = $(href == "#" || href == "" ? "html" : href);
334    var position = target.offset().top;
335    $("html, body").animate({ scrollTop: position }, speed, "swing");
336    return false;
337  });
338
339  $('.acc_head').on('click', function () {
340    $(this).toggleClass('open');
341    $(this).next('.acc_body').slideToggle(300);
342  });
343});
344
345// ページアップ単体
346var up = $("#pageup");
347$(window).scroll(function () {
348  if ($(this).scrollTop() > 200) {
349    up.fadeIn();
350  } else {
351    up.fadeOut();
352  }
353});
354up.click(function () {
355  // 一時的に scroll-behavior を無効にする
356  $("html").css("scroll-behavior", "auto");
357
358  // スクロールをアニメーションで実行
359  $("body, html").animate({ scrollTop: 0 }, 500, function () {
360    // スクロールが完了したら scroll-behavior を元に戻す
361    $("html").css("scroll-behavior", "smooth");
362  });
363
364  return false;
365});