前提
front-page.php(アーカイブアコーディオン設置)
archive.js(アコーディオン機能)
実現したいこと
アコーディオンが閉じずに開きっぱなしになる
archive.js
jQuery(document).ready(function ($) { // @link: http://kachibito.net/snippets/basic-panel //年月別アーカイブ表示用 $(".archive-list li").click(function () { //@link: https://stackoverflow.com/questions/6656202/jque … if ($(this).next(".month-archive-list").is(":visible") || $(this).hasClass("acv_open")) { //既に開いている場所なら $(".month-archive-list", this).slideUp("fast"); //閉じる $(this).removeClass("acv_open"); //.acv_open削除 } else { //閉じている場所なら $(this).siblings().children(".month-archive-list").slideUp("fast"); //その他のリストを閉じる $(".month-archive-list", this).slideDown("fast"); //開く $(".year").removeClass("acv_open"); //.acv_open削除 $(this).addClass("acv_open"); //.acv_open付加 } }); });
front-page.php
<div class="widget"> <h4 class="monthly-archive-title">月別アーカイブ</h4> <?php /* 年月別アーカイブリストを取得する */ $sql = " SELECT YEAR (post.post_date) AS y, MONTH (post.post_date) AS m, count(*) AS c FROM wp_posts AS post INNER JOIN wp_postmeta AS meta ON post.id = meta.post_id WHERE meta.meta_key = 'single_rss_feed1' AND post.post_type = 'post' AND post.post_status = 'publish' GROUP BY y, m ORDER BY y DESC, m DESC "; $query = $wpdb->prepare($sql); $ym_items = $wpdb->get_results($query); /* 年月別配列を作成 */ $ym_array = []; foreach ($ym_items as $item) { $ym_array[$item->y][$item->m] = $item->c; } $this_year = (string) idate('Y'); // 現在の年を、4桁の文字列で取得 $out = '<ul class="archive-list">'; foreach ($ym_array as $y => $y_items) { if ($y == $this_year) { // 今年だったら $out .= '<li class="year acv_open current">'.$y; } else { // それ以外の年の場合 $out .= '<li class="year">'.$y; } $out .= '<ul class="month-archive-list">'; foreach ($y_items as $m => $c) { $url = home_url("{$y}/{$m}"); $out .= "<li><a href=\"{$url}\">{$y}年{$m}月</a>({$c})</li>"; } $out .= '</ul>'; // 閉じる <ul class="month-archive-list"> } $out .= '</li>'; // 閉じる <li class="year"> $out .= '</ul>'; // 閉じる <ul class="archive-list"> // HTMLの出力 echo $out; ?> </div>
style.css
ul.archive-list ul{ /* アコーディオン部 */ margin: 5px 0 30px 15px; } ul.archive-list ul.hide{ /* アコーディオン非表示 */ display: none; } ul.archive-list li{ /* リセット */ list-style: none; background: none; padding: 0; } ul.archive-list li p{ /* リセット */ margin: 0; } ul.archive-list li p span{ /* アイコン背景 */ display: inline-block; width: 15px; height: 15px; position: relative; background: #09c; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; } ul.archive-list li p span:before{ /* アイコン横棒 */ content:''; height: 1px; width: 9px; display: block; background: #fff; position: absolute; top: 7px; left: 3px; } ul.archive-list li p span:after{ /* アイコン縦棒(閉じてるとき) */ content: ''; height: 9px; width: 1px; display: block; background: #fff; position: absolute; top: 3px; left: 7px; } ul.archive-list li p span.acv_open:after{ /* アイコン縦棒なし(開いてるとき) */ height: 0; width: 0; } ul.archive-list ul li{ /* アーカイブリスト */ margin-left: 15px; position: relative; } ul.archive-list ul li::after{ /* アーカイブリストマーク */ display: block; content: ''; position: absolute; top: .2em; left: -1em; width: 6px; height: 6px; border-right: 1px solid #666; border-bottom: 1px solid #666; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* 月別アーカイブリストのアイコン設定 */ .month-archive-list > li::before { font-family: 'fontello'; content: '\e802'; /* > マーク */ margin-right: .5em; margin-left: 3px; color: rgba(0,0,0,.54); } /* ここから効かない */ /* acv_openクラスをもたないリスト項目の子リスト(month-archive-list)は、デフォルト非表示に */ ul.archive-list > li:not(.acv_open) > ul { display: none; } /* 年別アーカイブリストのアイコン設定 */ .archive-list > li.acv_open::before { /* リストが開かれているとき */ font-family: 'fontello'; content: '\e815'; /* -マーク */ margin-right: .5em; } .archive-list > li:not(.acv_open)::before { /* リストが閉じられているとき */ font-family: 'fontello'; content: '\e814'; /* +マーク */ margin-right: .5em;
試したこと
ul.archive-listにcssクラス変更
文法確認
0 コメント