Dropdown menu Jquery / CSS

[rickvandermey]

Goedemorgen,

Ik zit met het volgende probleem. Ik heb een dropdown menu opgezet die netjes in en uitklapt. Alleen het is de bedoeling dat de ingeklapte versie er als volgt uit ziet.



Op dit moment is het menu als volgt opgebouwd.

JavaScript:

function collapslist(){   
   $('.collapsible').each(function(){
      $('.collapsbutton h2',this).after('<span class="iconspan"></span><br />');
     $('.collapsbutton ',this).click(function(){
       if($(this).next('.collapscontent:visible').size()>0){
         $(this).addClass('closed').next('.collapscontent').addClass('closed').slideUp();
       } else {
         $(this).removeClass('closed').next('.collapscontent').removeClass('closed').slideDown();
       }
       return false;
     })
     $('.closed', this).hide().prev('.collapsbutton').addClass('closed');
   })
}

HTML:

<div class="block nopad collapsible" id="menu" >
        <div id="m@(Model.Id)" class="navbar collapsbutton">
          <h2 class="menuheader">@Library.Coalesce(parent.MenuName, "Menu")</h2>
        </div>
        <div class="collapscontent @Model.IsEqual(new DynamicNode(4358),"","closed")">
        <ul class="list">
          @foreach (var item in parent.Children.Where("nodeTypeAlias!=\"mcitRepository\"").Where("Visible")) {
            <li id="i@(item.Id)">  
              <a class="listlink" href="@item.Url">@Library.Coalesce(item.Title, item.Name)</a>
            </li>
          }
        </ul>
        </div>
        <div class="clear"></div>
      </div>

Het probleem ontstaat door de .hide functie die er eigenlijk voor zorgt dat het menu helemaal verdwijnt doordat die een display:none toepast. Hoe kan ik hier het makkelijkst omheen werken om vervolgens de beginwaarde (ingeklapt) op te maken

[Wiethoofd]

Waarom een jQuery .hide() als je ook een class toe kunt voegen (wat je nu op een voorgaand element doet) waarmee je in plaats van een display: none een visibility: hidden of een height instelt.

[rickvandermey]

De display:none blijft tevoorschijn komen waardoor het niet op te maken valt. Ook als ik .hide vervang

[Wiethoofd]

En wat als je zonder javascript, maar met puur CSS de boel eens bekijkt?

Verder doet een .slideUp() volgens mij ook een display: none; als de animatie klaar is. Is het niet mogelijk een CSS3 animatie te gebruiken of gewoon de height naar 0 of x te zetten?

Ik had laatst ergens een post gelezen over het 'misbruiken' van javascript om content te verbergen/animeren met hide functies, gewoon een class toevoegen die deze property zet is vele malen netter, sneller en makkelijker te debuggen

Deze post dus: Smashing Coding - Building A Relationship Between CSS & JavaScript

[ Voor 14% gewijzigd door Wiethoofd op 26-11-2012 17:28 ]

[rickvandermey]

css3 is wel een oplossing, maar niet de oplossing voor mij. Komt omdat vele dingen met elkaar al verbonden staan, en een css3 oplossing betekent dat ik steeds meer dingen moet gaan veranderen, waardoor een verandering in jquery meer voor de hand ligt. Ik kan alleen niet veel wijzer worden van de veranderingen in jquery op de toepasbaarheid van het menu.

Het is leuk een menu met deze vormgeving, maar zelfs het internet kan me er niet bij helpen.

[BramVroy]

animate je height naar 0, dan zou je display normaal gezien op block moeten blijven staan.

[Wiethoofd]

Kun je ergens een testcase online zetten? De html uit je TS kunnen we zonder het CMS/framework/.... weinig mee.