11534 sujets

JavaScript, DOM et API Web HTML5

Menu déroulant avec contenu dynamique - jquery+mootools

Voilà, je suis débutant et je ne trouve pas de solution à mon pb qui est peut-être trivial. Smiley confus
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;
		}

	});
});
[/i][/i][/i][/i]
Modifié par lefty_g (27 May 2010 - 22:20)
Un p'tit up.
Peut-être que mon problème ne vient pas du code javascript mais d'une propriété css.

Faut-il que j'applique la méthode jquery aux sous-menus "Partie1,2,3" comme je le fait pour les sous sous-menus ? (j'aimais bien pourtant les effets avec mootools...)
Quand tout le menu sera composé de balise <ul> et <li>, il ne devrait plus y avoir ce comportement...
Sujet clos
Aller à