essayer de faire un menu accordéon à partir d'une liste - jquery indexhibit

Question

Im enseigner mon auto javascript & jquery donc cela pourrait être un peu une question à basse sourcils ou tout à fait trop de code pour quiconque à parcourir, mais je l'espère pour quelques commentaires . J'ai regardé autour de moi et n'ai pas trouvé un fil qui ressemble à ce qui va se passer avec ma question. Im utilisant l'indexs cms (ne peut pas créer un nouveau tag!) Et essayant de créer un menu de style accordéon à partir de la liste de menu qu'il génère. J'ai essentiellement le comportement Im après, en modifiant un peu de travail existant mais il y a quelques faiblesses, qui sont sans aucun doute un conflit entre le .click et .toggle et une utilisation confuse si les déclarations. Je veux fondamentalement repartir de zéro et refaire ceci pour que je puisse a) apprendre de mes erreurs b) comprendre ce qui se passe. J'ai des problèmes maintenant parce que je ne sais pas où aller à partir d'ici, ou comment résoudre le problème.

Quelqu'un peut-il me donner une analyse rapide de la façon dont le script dans la tête du document fonctionne ensemble? De même, avez-vous un aperçu de la nature des conflits que je vois et quelle approche adopter pour y remédier? Si vous alliez recommencer, quelle serait votre approche?

Voici un test pour le voir en action (verrues et tous): http://stillstatic.nfshost.com/

---

Ce script va dans la tête de document:

<script type='text/javascript'> //im not entirely clear as to what this achieves 
path = 'path/to/script/'; 
$(document).ready(function() { 
setTimeout('move_up()', 1); 
expandingMenu(0); 
expandingMenu(1); 
expandingMenu(2); 
expandingMenu(3); 
expandingMenu(4); 
//etc 
}); 
</script> 

---

la liste générée:

<ul> 
<li class='section-title active_menu'>blogs</li> 
<li><a class="active" href='#' onclick="do_click();">3</a></li> 
</ul> 

<ul> //this menu section dose not have a label: class .section-title 
<li><a href='#' onclick="do_click();">1</a></li> 
<li><a href='#' onclick="do_click();">2</a></li> 
</ul> 

<ul> //this menu section is not the 'active menu' this is achieved by the jquery script 
<li class='section-title'>writing</li> 
<li><a href='#' onclick="do_click();">4</a></li> 
<li><a href='#' onclick="do_click();">5</a></li> 
</ul> 

---

La viande dans un script externe:

function expandingMenu(num) { 
var speed = 500; 
var menu_title = $("#menu ul").eq(num).children(":first"); // ie. first child be the   title with the class .section-title unless the user turned it off 
var menu_items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; }); // ie. any li NOT in position 0, below li.section-title 

if (menu_items.is(".active") == true) { 
menu_title.addClass("active_menu"); //Add a class to the active list so we can style it. 
} 
if (menu_title.is(".section-title") == true){ // this if prevents interference with users who turn off the section titling 

if ((menu_items.is(".active") == false) && (menu_items.is(":visible")) ) { 
menu_items.hide(0);// first we hide the inactive exhibits 
} 

$('li').click(function(){ 
if ((menu_title.is(":visible") == true) ){ 
menu_items.hide(speed); 
    } 
if ((menu_items.is(":hidden") == true) && ((''))){// ?! without this EMPTY second condition things break down??? hu?. . . 
menu_items.show(speed); 
} 
}) 

menu_title.css({cursor:"pointer"}).toggle(// add click functions + pointer to  menu_title 
function() { 
menu_items.show(speed);//Open it up 
}, 
function() { 
// this function could even be empty but without a pointless 'if' things get really weird 
if (menu_items.is(".xx")) 
menu_items.hide(speed); //Take the menu item off of active duty! 
} 
) 
} 
} 

Answer 1

Vous avez raison - beaucoup de code à patauger dans (et actuellement formaté mal) .. votre échantillon semble fonctionner - ce qui est exactement le problème avec elle ?

En ce qui concerne le code dans la tête - move_up() ne sont pas définies dans le code (le setTimeout)

expandingMenu (0) - élargit le premier li, théoriquement. Elles devraient être dans un document prêt, et probablement un peu plus élégant:

$("#menu ul li").click(); 

jqueryui.com a un plugin accordéon