Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

jQueryによるカテゴリのアコーディオン表示

前回に続き今回もjQueryネタ。ちょっとしたアニメーションネタです。

本ブログではサイドバーにあるカテゴリーにマウスカーソルを持っていくと下にびよーんと伸びます。これの実装方法について。

blog40

 

まずカテゴリ部分は以下のように実装してsidebar.phpから<?php get_template_part( '/widgets/category' ); ?>で呼び出しています。

category.php

 

すると以下のようなHTMLが出力されます。

 

出力されるHTMLを踏まえて以下のようにjQueryで料理しています。

script.js

$(function(){
    //カテゴリの折り畳み
    $(".tree-menu .children").hide();
    $(".tree-menu li").hover(function() {
        $(this).children('ul').slideDown(200);
    }, function() {
        $(this).children('ul').hide(200);
    });
});