Voilà, je suis débutant et je ne trouve pas de solution à mon pb qui est peut-être trivial. 
J'ai besoin de faire un menu déroulant comme ceci:
Partie 1
sous-menu 1
sous-menu 2
Partie 2
sous-menu a
sous-sous-menu 1
sous-sous-menu 2
sous-menu b
sous-sous-menu 3
sous-sous-menu 4
Partie 3
sous-menu X
sous-menu Y
"Partie 1,2,3" sont des balises <h2> sur lesquelles on peut cliquer pour faire apparaitre ou disparaitre le sous-menu. J'utilise pour cela mootools.
Dans Partie 2, il y a des sous sous-menus. Quand on clique sur "sous-menu a" par exemple, on fait apparaitre ou disparaitre "sous-sous-menu 1" et "sous-sous-menu 2". J'utilise pour cela jquery. Le code est celui du tuto de ce site.
Le problème est le suivant.
Quand on ferme tous les sous sous-menus puis que l'on ferme "Partie 2". Ensuite, on l'ouvre et on clique sur "sous-menu b" mais le sous sous-menu ne s'affiche pas.
En gros, le sous-menu "Partie 2" n'est pas redimentionné.
J'espère avoir été clair....
Merci pour votre aide.
Voici le code html:
...et le code de menu.js:
Modifié par lefty_g (27 May 2010 - 22:20)
J'ai besoin de faire un menu déroulant comme ceci:
Partie 1
sous-menu 1
sous-menu 2
Partie 2
sous-menu a
sous-sous-menu 1
sous-sous-menu 2
sous-menu b
sous-sous-menu 3
sous-sous-menu 4
Partie 3
sous-menu X
sous-menu Y
"Partie 1,2,3" sont des balises <h2> sur lesquelles on peut cliquer pour faire apparaitre ou disparaitre le sous-menu. J'utilise pour cela mootools.
Dans Partie 2, il y a des sous sous-menus. Quand on clique sur "sous-menu a" par exemple, on fait apparaitre ou disparaitre "sous-sous-menu 1" et "sous-sous-menu 2". J'utilise pour cela jquery. Le code est celui du tuto de ce site.
Le problème est le suivant.
Quand on ferme tous les sous sous-menus puis que l'on ferme "Partie 2". Ensuite, on l'ouvre et on clique sur "sous-menu b" mais le sous sous-menu ne s'affiche pas.
En gros, le sous-menu "Partie 2" n'est pas redimentionné.
J'espère avoir été clair....
Merci pour votre aide.
Voici le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test menu arcordeon</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready( function () {
jQuery(".navigation ul.subMenu:not('.open_at_load')").hide();
jQuery(".navigation li.toggleSubMenu span").each( function () {
var TexteSpan = jQuery(this).text();
jQuery(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;
jQuery(".navigation li.toggleSubMenu > a").click( function () {
if (jQuery(this).next("ul.subMenu:visible").length != 0) {
jQuery(this).next("ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") } );
}
else {
jQuery(".navigation ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
jQuery(this).next("ul.subMenu").slideDown("normal", function () { jQuery(this).parent().addClass("open") } );
}
return false;
});
} ) ;
// -->
</script>
</head>
<body>
<div id="menu">
<h2 class="toggleSubMenu">Partie 1</h2>
<ul id="accordeon">
<li><a href="">element a</a></li>
<li><a href="">element b</a></li>
<li><a href="">element c</a></li>
</ul>
<h2>Partie 2</h2>
<ul id="accordeon" class="navigation">
<li class="toggleSubMenu"><a href=#>exemple 1</a>
<ul class="subMenu">
<li><a href=>11111</a>
<li><a href=>22222</a>
</ul>
</li>
<li class="toggleSubMenu"><a href=#>exemple 2</a>
<ul class="subMenu">
<li><a href=>aaaaaaa</a>
<li><a href=>bbbbbbb</a>
<li><a href=>ccccccc</a>
</ul>
</li>
</ul>
<h2>Partie 3</h2>
<ul id="accordeon">
<li class="menuli_style1"><a href="">element d</a></li>
<li class="menuli_style2"><a href="">element e</a></li>
</ul>
</div>
</body>
</html>
...et le code de menu.js:
window.addEvent('domready', function(){
// Categories
var heads = $$('h2');
var accordions = $$('ul#accordeon');
//var spans = new Array();
var collapsibles = new Array();
heads.each( function(head, i) {
var headimg = new Element('img');
headimg.setProperty('src', 'images/interface/menu_less.gif');
headimg.injectInside(heads[i]);
heads[i].setStyles('cursor: pointer;');
var collapsible = new Fx.Slide(accordions[i], {
duration: 500,
transition: Fx.Transitions.quadIn
});
collapsibles[i] = collapsible;
head.onclick = function() {
var img = $E('img', head);
if (img) {
var newHTML = img.getProperty('src') == 'images/interface/menu_more.gif' ? 'images/interface/menu_less.gif' : 'images/interface/menu_more.gif';
img.setProperty('src', newHTML);
}
collapsible.toggle();
return false;
}
});
});
Modifié par lefty_g (27 May 2010 - 22:20)