TEST 4のコーディングです。
jqueryのハンバーガー部分
/*ハンバーガナビの開閉*/
$(".openbtn").click(function () {
//ボタンがクリックされたら
$(this).toggleClass("active"); //ボタン自身に activeクラスを付与し
$("#g-nav").toggleClass("panelactive"); //ナビゲーションにpanelactiveクラスを付与
});
$("#g-nav a").click(function () {
//ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass("active"); //ボタンの activeクラスを除去し
$("#g-nav").removeClass("panelactive"); //ナビゲーションのpanelactiveクラスも除去
});
navi内のアコーディオン
/*navi内のアコーディオン階層*/
$(function () {
//.accordion_oneの中の.accordion_headerがクリックされたら
$(".s_01 .accordion_one .accordion_header").click(function () {
//クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
$(this).next(".accordion_inner").slideToggle();
$(this).toggleClass("open");
});
});ヘッダーがスクロールすると隠れるjquery
/*ヘッダーのアニメーション*/
var _window = $(window),
_header = $(".header"),
heroBottom,
startPos,
winScrollTop;
_window.on("scroll", function () {
winScrollTop = $(this).scrollTop();
heroBottom = $(".mv").height();
if (winScrollTop >= startPos) {
if (winScrollTop >= heroBottom) {
_header.addClass("hide");
}
} else {
_header.removeClass("hide");
}
startPos = winScrollTop;
});
_window.trigger("scroll");質問のアコーディオン開閉のjquery
//アコーディオンをクリックした時の動作
$('.title').on('click', function() {//タイトル要素をクリックしたら
$('.box').slideUp(500);//クラス名.boxがついたすべてのアコーディオンを閉じる
var findElm = $(this).next(".box");//タイトル直後のアコーディオンを行うエリアを取得
if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
$(this).removeClass('close');//クラス名を除去
}else{//それ以外は
$('.close').removeClass('close'); //クラス名closeを全て除去した後
$(this).addClass('close');//クリックしたタイトルにクラス名closeを付与し
$(findElm).slideDown(500);//アコーディオンを開く
}
});
//ページが読み込まれた際にopenクラスをつけ、openがついていたら開く動作※不必要なら下記全て削除
$(window).on('load', function(){
$('.accordion-area li:first-of-type section').addClass("open"); //accordion-areaのはじめのliにあるsectionにopenクラスを追加
$(".open").each(function(index, element){ //openクラスを取得
var Title =$(element).children('.title'); //openクラスの子要素のtitleクラスを取得
$(Title).addClass('close'); ///タイトルにクラス名closeを付与し
var Box =$(element).children('.box'); //openクラスの子要素boxクラスを取得
$(Box).slideDown(500); //アコーディオンを開く
});
});TOPをクリックで戻る。スクロールTOPのjquery
//スクロールした際の動きを関数でまとめる
function PageTopCheck(){
var winScrollTop = $(this).scrollTop();
var secondTop = $("#area-2").offset().top - 150; //#area-2の上から150pxの位置まで来たら
if(winScrollTop >= secondTop){
$('.js-scroll-down').removeClass('scroll-view');//.js-scrollからscroll-viewというクラス名を除去
$('.js-pagetop').addClass('scroll-view');//.js-pagetopにscroll-viewというクラス名を付与
} else {//元に戻ったら
$('.js-scroll-down').addClass('scroll-view');//.js-scrollからscroll-viewというクラス名を付与
$('.js-pagetop').removeClass('scroll-view');//.js-pagetopからscroll-viewというクラス名を除去
}
}
//クリックした際の動き
$('.scroll-top a').click(function () {
var elmHash = $(this).attr('href'); //hrefの内容を取得
if (elmHash == "#area-2") {//もし、リンク先のhref の後が#area-2の場合
var pos = $(elmHash).offset().top;
$('body,html').animate({scrollTop: pos}, 500); //#area-2にスクロール
}else{
$('body,html').animate({scrollTop: 0}, 500); //それ以外はトップへスクロール。数字が大きくなるほどゆっくりスクロール
}
return false;//リンク自体の無効化
});
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
PageTopCheck();/* スクロールした際の動きの関数を呼ぶ*/
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
PageTopCheck();/* スクロールした際の動きの関数を呼ぶ*/
});swiperのjquery
const swiper = new Swiper(".swiper", {
slidesPerView: 1,
breakpoints: {
1030: {
slidesPerView: 2,
},
},
centeredSlides : false,
spaceBetween: 50,
// ページネーションが必要なら追加
pagination: {
el: ".swiper-pagination"
},
// ナビボタンが必要なら追加
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});サイトは
こちらから
