Untergeordnete Kategorien auf Klick anzeigen

Lesezeit: 2 Minuten

Untergeordnete Kategorien auf Klick anzeigen
Jakob K.

Auf meiner WordPress-Website habe ich ein Menü, das die Unterkategorien für jede Kategorie anzeigt. Was ich tun möchte, ist, die Unterkategorien standardmäßig auszublenden und sie nur anzuzeigen, wenn ich auf die übergeordnete Kategorie klicke.

Mein HTML:

<ul class="scrolling cat mCustomScrollbar _mCS_2 mCS-autoHide" style="position: relative; overflow: visible;">
<div id="mCSB_2" class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: 145px;" tabindex="0">
<div id="mCSB_2_container" class="mCSB_container" style="position: relative; top: -240px; left: 0px;" dir="ltr">
<li class="cat-item cat-item-31">
<a href="https://www.website.com/option">Option</a> <span>11</span>
<ul class="children">
<li class="cat-item cat-item-10867">
<a href="https://www.website.com/option2">Another option</a> <span>0</span>
</li>
</ul>
</li>

Meine Funktionen.php

function categorias() {
$args = array('hide_empty' => FALSE, 'title_li'=> __( '' ), 'show_count'=> 1, 'echo' => 0 );             
$links = wp_list_categories($args);
$links = str_replace('</a> (', '</a> <span>', $links);
$links = str_replace(')', '</span>', $links);
echo $links;  } 

Irgendwelche Ideen? Danke.

Untergeordnete Kategorien auf Klick anzeigen
Anant Kumar Singh

Verwenden Sie Css, um sie zu verbergen: –

ul.children{
  display:none;
}

Und dann verwenden Sie jQuery, um sie zu öffnen: –

jQuery('li.cat-item').on('click',function(){
   $('ul.children').hide();
   $(this).find('ul.children').show();
});

  • @JacobK. Froh dir zu helfen :):)

    – Anant Kumar Singh

    9. April 2018 um 6:19 Uhr

  • Ich habe gerade festgestellt, dass die obige Funktion die ul.children auch aus dem Kommentarbereich ausblenden wird. =/Irgendeine Idee, wie ich die ul.children nur vor dem angegebenen div verstecken kann? Danke noch einmal.

    – Jakob K.

    9. April 2018 um 9:39 Uhr

  • `$(this) sucht selbst nach spezifischem HTML (das angeklickt wird). Daher kann ich dein Problem nicht nachvollziehen.

    – Anant Kumar Singh

    9. April 2018 um 9:42 Uhr

  • Entschuldigung, mein fehler. Ich habe es geschafft, es zu beheben, indem ich li.cat-item > ul.children in CSS hinzufügte. Danke für deine schnelle Antwort!

    – Jakob K.

    9. April 2018 um 9:54 Uhr

Verwenden Sie dieses CSS wie unten

 <style>     
ul.children{display:none}
</style>

Im Javascript:

<script type="text/javascript">
$('.cat-item').click(function()
{
    if($(this).find('ul.children'))
    {
        $(this).find('ul.children').toggle();
    }
});
</script>

  • Vielen Dank für Ihre Antwort. 🙂

    – Jakob K.

    4. April 2018 um 8:18 Uhr

1004660cookie-checkUntergeordnete Kategorien auf Klick anzeigen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy