WordPressで親カテゴリー『試合のエントリー状況』を表示し、子カテゴリーを隠す方法は、主にCSSやjQueryを使って実現できます。これにより、親カテゴリーがクリックされたときのみその内容が表示され、子カテゴリーは非表示になります。
1. 親カテゴリーの表示方法
まず、親カテゴリーを表示させるために、通常のリストアイテムとして親カテゴリーをHTMLで記述します。親カテゴリーはそのまま表示され、子カテゴリーは後述する方法で隠します。
例:
<li><span style="font-size: 24pt;"><a>試合のエントリー状況</a></span>2. 子カテゴリーを隠すためのCSS
子カテゴリーを隠すために、CSSを使って非表示にします。これにより、親カテゴリーが表示された際に子カテゴリーは最初から表示されません。
以下のCSSコードを使って、子カテゴリー（ulタグ）を隠します。
ul { display: none; }3. 子カテゴリーをクリックで表示/非表示にする
次に、親カテゴリーがクリックされたときに子カテゴリーを表示または非表示にするためのJavaScript（jQuery）を使用します。
以下のjQueryコードをWordPressのカスタムスクリプトや子テーマのJavaScriptファイルに追加することで、クリック時に子カテゴリーが表示・非表示になります。
$(document).ready(function() { $('a').click(function() { $(this).siblings('ul').toggle(); }); });4. 最終的なHTMLコードと機能
全体の流れとして、親カテゴリーを表示し、クリックするとその親カテゴリーに関連する子カテゴリーが表示される形になります。これを実現するための最終的なHTMLコードは次のようになります。
<li><span style="font-size: 24pt;"><a>試合のエントリー状況</a></span>
<ul style="display:none;">
<li><span style="font-size: 24pt;"><a href="https://tutinko.bbs.fc2.com/?act=reply&tid=8489636">6/15井原市S、ミハラスポーツD</a></span></li>
<li><span style="font-size: 24pt;"><a href="https://tutinko.bbs.fc2.com/?act=reply&tid=8489638">6/21（土）フォークロ杯のドロー</a></span></li>
</ul></li>5. まとめ
この方法を使うことで、親カテゴリー『試合のエントリー状況』を表示し、子カテゴリーをクリックで表示/非表示にすることができます。CSSとjQueryを組み合わせて実現するこの方法は、簡単に実装でき、ユーザーにとって便利なインターフェースを提供します。
コメント