olaf-bosch.de

Ausklappen der Unterkategorien bei Click

Im 3. Teil werden wir nun die Linke Navigationsliste zu einem KlappMenü umbauen. Wie immer gehe ich hierbei von Code der von Wordpress erzeugt wird aus. In dem Falle ist der Code aus dem Widget „Kategorien“ bzw. „wp_list_categories()“:

  <div id="sidebar">
    <ul>
      <li class="categories">
        <h2>
          Kategorien
        </h2>
        <ul>
          <li class="cat-item">
            <a href="#">Erste Kategorie</a>
          </li>
          <li class="cat-item">
            <a href="#">Zweite Kategorie</a>
            <ul class="children">
              <li class="cat-item">
                <a href="http://olaf-bosch.de/blog/frisches/">frisches</a>
              </li>
              <li class="cat-item">
                <a href="http://olaf-bosch.de/blog/jquery/">jquery</a>
              </li>

usw.

Dazu kommt nun dieses Javascript welches das Verhalten in gewünschter Form auslöst:

// Klapp Menue 
  var $klapp = $('#sidebar li.categories li');
  $klapp.filter(':not(.current-cat)').children('ul').css("display","none");
  $klapp.filter(':has(ul)').children(':first-child').append(' »').click(function(){
    $(this).parent().siblings().children('ul:visible').slideUp('normal');
    $(this).next().slideToggle('normal');
    return false;
  });

Als erstes cachen wir uns nun die LI die wir ansprechen wollen in der Variable $klapp, also alle LI die Kind von LI Class categories und dem DIV mit ID sidebar sind. In 2. Zeile suchen wir daraus die LIs aus die nicht die Class current-cat haben (current-cat soll ja ausgeklappt sein) und schalten die enthaltene UL unsichtbar. In Zeile 3 werden nun alle LIs die eine Child-UL haben angesprochen, dessen erstes Kind (der erste Link) wird mit einem Kennzeichen versehen. Hier .append(' »'), ihr könnt auch .addClass('irgendwas') verwenden und die Kennzeichnung in die CSS auslagern. Wird nun dieser Link angeklickt werden alle sichbaren Child-UL ausgeblendet und die nächste vorkommende UL (Unterkategorien) eingeblendet. Dem Link soll natürlich nicht gefolgt werden also return false;

Beachten!!!

Die gesamte Funktionalität kann ich hier in der Demo leider nicht abbilden. So fehlt hier die Möglichkeit eine Kategorie bei seitenwechsel ausgeklappt zu halten. In einem echten Wordpress sollte dies aber problemlos klappen. Weiterhin ist der erste Link „Erste Kategorie“ nicht funktional, in der Praxis würde dann ja ein Seitenwechsel ausgelöst. Zur demonstration des JS fand ich es aber sinnvoll dies so zu lassen um zu zeigen, dass es Kategorien ohne Kinder nicht beeinträchtigt.

Kommentare, Fragen, Anregungen bitte im Blogbeitrag oder per Mail