ホバーしたら隣接する要素をアコーディオンする方法

ホバーしたら隣接する要素をアコーディオンする方法を紹介します。

ホバーしたら隣接する要素をアコーディオンする

子要素ではなく隣接にしなければいけないシチュエーション
・ホバーしたときのコンテンツをウィンドウサイズまで広げたい

.animate()を使用

・css()だとゆっくり変化が適応できなかった
・セレクタの付与も同じくゆっくり変化が適応できなかった

—

// グロナビのアコーディン
$(function(){
$("div#gn li").hover(function(){
       $(this).next(".contents").animate({height: "500px"}, 500);
}, function() {
$(this).next(".contents").animate({height: "0px"}, 500);
});
});

—

.contents:hover {
height: 500px !important;
}

jQueryで高さを固定長からautoアニメーションで変更させる方法
https://qiita.com/Kohei_Kishimoto0214/items/237d17373074c6b74223

↑↑↑↑↑

アニメーションが連続されてしまうためボツ

ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】
https://hsmt-web.com/blog/js-mouseover-menu/

の3つ目、jQuery (slideDown / slideUp)でコントロールを実装

// グロナビアコーディオン
$(function(){
$(".has-sub").mouseover(function(){
$(this).children(".sub").stop().slideDown();
});
$(".has-sub").mouseout(function(){
$(".sub").stop().slideUp();
});
});

コンテンツ幅いっぱいまで広げる方法は

liについているpodision relativeを外すことで対応しました。