クリックされたら要素を表示したいが、2回目以降のクリックで表示されない

Question

前提・実現したいこと

絞り込み検索画面で、CSSのみでポップアップを実装中です。
ポップアップが開き、項目を選択したら「前画面に戻る」ボタンで戻る仕様で、何度もポップアップを開くことができる仕様にしたいです。

発生している問題・エラーメッセージ

一度ポップアップを開き項目を選択し、前画面に戻ってから、2度目にポップアップを開こうとすると開くことができません（最初の一回しかポップアップを開くことができません）。
どこがおかしいのでしょうか...
jQueryについてあまり詳しくないもので、修正箇所をご指摘いただければと思います。
どうぞよろしくお願いいたします！

該当のソースコード

HTML
↓都道府県名の.sf-level-1をクリックすると、子カテゴリであるul.childrenがポップアップで表示されます。
（この検索フォーム自体がモーダルで表示されています）

<!-- モーダルエリアここから -->
<section id="modalArea" class="modalArea">
<div id="modalBg" class="modalBg"></div>
<div class="modalWrapper">
<div class="modalContents">
<h3>絞り込み検索</h3>
<form>
<!-- 他項目は省略いたします　-->
<ul>
<li class="sf-field-taxonomy-area_cat">
<h4>都道府県または市区町村を選択（複数選択可）</h4>
<ul data-operator="or" class="">
<li><input class="sf-input-checkbox" type="checkbox" value="saitama" name="_sft_area_cat[]" id="area1"><label class="sf-label-checkbox" for="area1">埼玉県<span class="sf-count">(283)</span></label>
<ul class="children">
<li class="sf-level-1><input class="sf-input-checkbox" type="checkbox" value="saitamasi" name="_sft_area_cat[]" id="area-c-1"><label class="sf-label-checkbox" for="area-c-1">さいたま市<span class="sf-count">(67)</span></label></li>
<li class="sf-level-1><input class="sf-input-checkbox" type="checkbox" value="kawagoeshi" name="_sft_area_cat[]" id="area-c-2"><label class="sf-label-checkbox" for="area-c-2">川越市<span class="sf-count">(67)</span></label></li>
<li class="sf-level-1><input class="sf-input-checkbox" type="checkbox" value="koshigayashi" name="_sft_area_cat[]" id="area-c-3"><label class="sf-label-checkbox" for="area-c-3">越谷市<span class="sf-count">(67)</span></label></li>
</ul>
</li>
<li class="sf-field-submit" data-sf-field-name="submit" data-sf-field-type="submit" data-sf-field-input-type=""><input type="submit" name="_sf_submit" value="検索"></li><li class="sf-field-reset" data-sf-field-name="reset" data-sf-field-type="reset" data-sf-field-input-type="button"><input type="submit" class="search-filter-reset" name="_sf_reset" value="リセット" data-search-form-id="19154" data-sf-submit-form="never"></li>
</ul>
</form>
</div>
</div>
</div>
</section>

CSS

ul.children {
display: none;
}
input.sf-input-checkbox:checked ~ ul.children {
display: flex;
}

jQuery

//プラグイン使用のためhtmlを編集できないので、戻るボタンをここで挿入しました
$('ul.children').append('<p id="close">前画面に戻る</p>');

//戻るボタンを押したらul.childrenが非表示になるようにしました
$(function () {
$('p#close').on('click', () => {
$('ul.children').hide();
});
});

補足情報（FW/ツールのバージョンなど）

wordpress使用
検索システムはserch&filter proというプラグインを使用
このプラグインをCSS等でカスタマイズしているという状況です。

Comments

[yambejp]

「CSSのみでポップアップを実装中」とありますがjQueryは
使っていいのでしょうか？
jQuery-uiでdialog処理は検討していませんか？

[iambeginnerr]

ご質問ありがとうございます。
jQueryを使用してもいいのですが、CSSのみでの実装を考えたのには訳がありまして、
１、htmlを編集できないのでこちらでID等を指定することが難しく断念しました
２、モーダル上にjQueryでモーダルを重ねたところ、挙動がおかしくなったため（私の書き方がいけなかったのだと思いますが）断念しました
という理由です。

時間があまりなかったため、なるべく大きく変更をせずに解決するには、投稿した方法が良いのかな？と、こちらの方法で進めていました。
ですが、こちらの方法で解決できなければ検索フォームのモーダル部分から全てjQueryで修正も検討しております！

Answer 1

少し無理矢理ですが、CSSでul.childrenが開いたら対応しているlabelを背景全体に広げ、クリックされたら閉じる仕様にしました。

Answer 2

$('ul.children').hide();でul.childrenが非表示になった後は、当然、その子要素の.sf-level-1を二度と選択できない状態になっているのではないですか？

Comments

[iambeginnerr]

回答いただきありがとうございます。
$('ul.children').hide();でul.childrenが非表示になった後の処理等は、特に何も記載していないのですが、何か記載すべきなのでしょうか？！

[itagagaki]

再び選択をすることを可能にするためには、（それを可能にしてよいというタイミングで） $('ul.children').show(); する必要があると思います。

[iambeginnerr]

なるほどです、
$(function () {
if ($('ul.children').css('display') == 'none') {
$('ul.children').show();
} else {
$('ul.children').hide();
}
});
});

と記載してみたのですが、検索フォームのモーダル自体開けなくなってしまいました。

（それを可能にしてよいというタイミングで）＝「ul.childrenを一度閉じたら」というタイミングになるかと思いますが、どのように指定したら良いでしょうか。

[itagagaki]

チェックされたまま ul.children の表示が消えた状態にするというのがそもそも破綻しているように思います。
$('ul.children').hide();
の代わりに
$('input.sf-input-checkbox').prop("checked", false);
で非選択状態に戻せばよくないですか？

[iambeginnerr]

教えていただいた通り、propを使用してみました！二回目以降も問題なくポップアップを開けるようになったのですが、ul.children内のcheckもfalseになってしまい、絞り込み検索として機能しなくなってしまいました。

[itagagaki]

設計に破綻がある気がしますので、まずは一度、図でも表でもいいので、UIによる状態の移り変わりをシミュレーションして、どういった操作でどんな状態になるべきか、設計し直してみるといいと思います。

[iambeginnerr]

お返事ありがとうございます。
確かに、途中からjQueryの使用を始めたりして、元々の設計とは違ったためjQuery使用での実現は難しくなてしまいました。ですので、少し無理矢理ではありますが、CSSのみでul.childrenを閉じるように修正をしました。この度は親身にお付き合いくださりありがとうございました！