style.cssのjQuery条件付きcssが機能しない

class設定が間違っているようです。アドバイスお願い致します。
通常のcssは機能しています。

ソースコード
view-source:http://www.gsdfgsdgs.cfbx.jp/

出力html
<ul class="archive-list"><li class="year current acv_open">2022<ul class="month-archive-list"><li><a href="http://www.gsdfgsdgs.cfbx.jp/2022/6">2022年6月</a>(4)</li><li><a href="http://www.gsdfgsdgs.cfbx.jp/2022/5">2022年5月</a>(6)</li></ul><li class="year current acv_open">2021<ul class="month-archive-list"><li><a href="http://www.gsdfgsdgs.cfbx.jp/2021/7">2021年7月</a>(2)</li></ul></li></ul></div>

//archive.js
jQuery(document).ready(function ($) {
//年月別アーカイブ表示用
$(".archive-list li").click(function () {
//
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
<?php
$sql = "
・・略・・
";
$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;
?>

//style.css
ul.archive-list ul{ /* アコーディオン部 */
margin: 5px 0 30px 15px;
}
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 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;

質問者からの補足コメント

• 1のcssは機能して2のcssが機能しないということは、> ulが認識されていないということだと思います。
  ulのクラス設定を修正しても変化はないです。
  
  １，.archive-list > li:not(.acv_open)::before { /* リストが閉じられているとき */
  font-family: 'fontello';
  content: '\e814'; /* +マーク */
  margin-right: .5em;
  }
  
  ２，/* acv_openクラスをもたないリスト項目の子リスト（month-archive-list）は、デフォルト非表示に */
  ul.archive-list > li:not(.acv_open) > ul.month-archive-list {
  display: none;
  }

  No.2の回答に寄せられた補足コメントです。 補足日時：2022/07/18 13:10

No.4 ベストアンサー 回答者： fujillin 回答日時： 2022/07/18 22:21

No1です。

どうやら、回答を読む気も、理解する気もないみたいなので・・・


質問文に示したままのソースで、スクリプトの最初に

jQuery(document).ready(function ($) {
$('.year:gt(0)').removeClass("acv_open").children('ul').hide();　//←1行追加

とでもしておけば、何とかなるでしょう。

この回答へのお礼

回答ありがとうございます。コードのクラスを変更したところ上手くいきました。

$ym_array = [];
foreach ($ym_items as $item) {
$ym_array[$item->y][$item->m] = $item->c;
}
$out = '<ul class="archive-list">';
foreach ($ym_array as $y => $y_items) {
$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;

お礼日時：2022/07/20 02:52

No.3 回答者： Ogre7077 回答日時： 2022/07/18 13:55

誤: <li class="year current acv_open">2021...

正: <li class="year">2021...

この回答へのお礼

下記のように修正してみたところ閉じたのですが、今度はボタンクリックで1度エラーが出るようになりました。2度目のクリックでは動作します。
"ul.archive-list > li:not(.acv_open) > ul"というコードは作者が何か意図があるように思えます…


/* acv_openクラスをもたないリスト項目の子リスト（month-archive-list）は、デフォルト非表示に */
ul.archive-list > li.acv_open > ul > ul.month-archive-list {
display: none;
}

お礼日時：2022/07/18 16:47

No.2 回答者： Ogre7077 回答日時： 2022/07/18 06:23

出力 HTML が

<ul class="archive-list">
<li class="year current acv_open">2022 <ul>...</ul></li>
<li class="year current acv_open">2021 <ul>...</ul></li>
</ul>
なので、
"ul.archive-list > li.acv_open > ul" は有りますが、
"ul.archive-list > li:not(.acv_open) > ul" が無いです。
HTML 構造を見直しましょう。

CSS のセレクタ記述にブレがあります。
質問文:
ul.archive-list > li:not(.acv_open) > ul
No.1 のお礼:
ul.archive-list ul > li:not(.acv_open) > ul /*多分間違い*/

参考)
ページ表示中の HTML 構造や CSS 適用状態を調べる方法
https://developer.mozilla.org/ja/docs/Learn/Comm …

この回答へのお礼

回答ありがとうございます
li:not(.acv_open)というのはCSSで付与するのではないのでしょうか？

もう1点お聞きしたいのですが、jQueryにあまり詳しくない状態で作成しているのですが、この場合PHPとjQueryどちらを修正する必要がありますでしょうか？

お礼日時：2022/07/18 11:41

No.1 回答者： fujillin 回答日時： 2022/07/17 18:58

こんにちは

すでに回答したはず。
https://oshiete.goo.ne.jp/qa/13045843.html

出力のHTMLを確認しさえすればわかること。
CSSが効かないのではありません。
クラス名が全部「acv_open」になっているだけの話。

この回答へのお礼

回答ありがとうございます。
classがすべてacv_openになっているとはどういうことでしょうか？
下記のコードは機能しているため、jQueryが間違えているかcssに問題が有るように見えます。(.acv_open)は機能しているようなので、ul.archive-list ul > li:not(.acv_open) > ulの書き方に問題があるようですがどこが間違えているのか特定ができていません。

※効かないコード
/* acv_openクラスをもたないリスト項目の子リスト（month-archive-list）は、デフォルト非表示に */
ul.archive-list ul > li:not(.acv_open) > ul {
display: none;
}
_______________________________________________________

※効いているコード
/* 年別アーカイブリストのアイコン設定 */
ul.archive-list > li.acv_open::before { /* リストが開かれているとき */
font-family: 'fontello';
content: '\e815'; /* -マーク */
margin-right: .5em;
}

ul.archive-list > li:not(.acv_open)::before { /* リストが閉じられているとき */
font-family: 'fontello';
content: '\e814'; /* +マーク */
margin-right: .5em;
}

お礼日時：2022/07/17 21:32