Problema meniu slide dinamic.

[quadmachine]

Nu imi afiseaza link-urile le ascunde ,sigur gresesc la CSS dar nu gasesc unde.

Jquery:

Cod: Selectaţi tot

    <script>
        $(document).ready(function(){
$("#accordion > div").click(function(){

   if(false == $(this).next().is(':visible')) {
      $('#accordion > li > ul > li').slideUp(300);
   }
   $(this).next().slideToggle(300);
});

$('#accordion > ul:eq(0)').show();
      });
        </script>

CSS:

Cod: Selectaţi tot

#accordion {
   list-style: none;
   padding: 0 0 0 0;
   width: 170px;
}
#accordion li{
   display: block;
   background-color: #efefef;
   font-weight: bold;
   margin: 1px;
   cursor: pointer;
   padding: 4px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
}
#accordion ul {
   list-style: none;
   padding: 0 0 0 0;
}
#accordion ul li{
   font-weight: normal;
   cursor: auto;
   background-color: #fff;
   padding: 0 0 0 7px;
}

#accordion li{
  display: none;
}

#accordion a {
   text-decoration: none;
   color: #111;
}

#accordion a:hover {
   text-decoration: underline;
}

PHP:

Cod: Selectaţi tot

     function dropdownMenu(){
       $roots = mysql_query("SELECT * FROM categories WHERE parent = ".intval(0)) or die(mysql_error());
       $subs = mysql_query("SELECT * FROM categories WHERE parent > ".intval(0)) or die(mysql_error());

       $sublinks = array();

       while ($row = mysql_fetch_array($subs)) {
             array_push($sublinks, $row);}

             $menu = '
             <div class="meniuCol">
             <ul id="accordion">'."\n";
             while($link = mysql_fetch_assoc($roots)) {
      $menu .= '<div>'.$link["text"].'</div>'."\n".'<li><ul>'."\n";
      foreach ($sublinks as $sublink) {
         if($sublink['parent'] == $link['id']) {
                          $menu .= '<li><a href="'.$sublink["link"].'">'.$sublink["text"].'</a></li>'."\n";
                          }
      }
      $menu .= '   </ul></li>'."\n";

      }
      $menu .= '</ul></div>';

      return $menu."\n";
      }

[ViezuREX]

Ai cumva un link unde putem vedea codul "in actiune"? ca sa nu trebuiasca sa il luam cu copy/paste de aici si sa adaptam?

[quadmachine]

Lucrez pe localhost dar se poate face si static fara PHP.Pe http://jsfiddle.net/ poti face o versiune statica .Mersi

[ViezuREX]

Mie imi pare mai mult a fi din jQuery pentru ca pe elementul li din #accordion iti ramane display: none.
Desi scriptul jQuery iti pune la click display: list-item; acesta nu face override la display: none; si cred ca de la asta e. Nu prea am timp acum sa ma uit pe codul de jQuery dara daca nu o dovedesti pana maine mai arunc o privire.

[quadmachine]

L-am rezolvat dar pe jumatate, era din jquery.Cand intru pe pagina sunt visible desi ar trebui sa fie hidden si una singura visible.Am incercat ceva din CSS dar nu face ca inainte daca ii dau display: none la sub element (li ul li).Se poate rezolva din jquery?

[ViezuREX]

Se poate face destul de usor din jQuery daca folosesti addClass, numai ca trebuie sa definesti inca doua clase in CSS, una care sa fie cu display: hidden; si una cu display: block;

[quadmachine]

Bun ti-am urmat sfat-ul si functioneaza cat de cat dar im afiseaza doar o singura subcategorie la fiecare categorie.In loc sa imi afiseze prima categorie si restul hidden.

Asa ceva am adaugat in jquery.

Cod: Selectaţi tot

$('#accordion li:first-child').addClass('showClass');

[ViezuREX]

Pai ar trebui sa ai doua clase de elemente, una pentru cele de pe nivelul 1 si una pentru cele de pe nivelul 2. Astfel poti instrui jQuery ca la .hover pe elementuld e nivel 1 sa faca .addClass cu SHOW pentru elementele de pe nivelul 2.