menu according

Sujet résolu

28 mai 2010 à 22:46:45

BONSOIR;
j'ai le code suivant

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0074)http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><HEaD><METa http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <TITLE>Menu accordéon avec jQuery</TITLE>
    
	   <link rel="stylesheet" type="text/css" media="screen" title="index.css" href="feuilles_de_style/panneau_droite.css" />
	   <link rel="stylesheet" type="text/css" media="screen" title="index.css" href="panneau_droite.css" />
</STYLE>
	<!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
    <SCRIPT type="text/javascript" src="./Menu accordéon avec jQuery_files/jquery-1.2.1.js"></SCRIPT>
    <SCRIPT type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="" title="afficher le sous-menu">' + TexteSpan + '</a>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </SCRIPT>
</HEaD><BODY>
    <ul id="navigation">
        <li class="toggleSubMenu"><a href="" title="">Item 1</a>
		<ul class="subMenu" style="display:visible;">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>
            </ul>
		</li>
        <li class="toggleSubMenu"><a href="" title="afficher le sous-menu">Item 2</a>
            <ul class="subMenu" style="display: none; ">
                <li> ghhhh</li>

            </ul>
        </li>
        <li class="toggleSubMenu"><a href="" title="afficher le sous-menu">Item 3</a>
            <ul class="subMenu" style="display: none; ">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>
            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul>    


</BODY></HTML>

j'aimerai à l'ouvrture de la page le menu item 1 soit visible, pour cela j'ai ajouté "display:block; mais ça marche pas
comment faire ?
merci

Dyl@n J.

29 mai 2010 à 20:57:38

Salut.

Essaye en ajoutant un ID sur ton élément, puis affiche le dans $(document).ready avec $("#tonid").show();

Tillertan

29 mai 2010 à 21:07:05

Sérieux t'as regardé ton script un seul instant ?

Question bête, non.

// On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();

Dyl@n J.

29 mai 2010 à 21:22:20

Désolé, j'ai peut-être répondu un peu trop vite.
Ça à l'air de fonctionner avec ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Menu accordéon avec jQuery</title>

	<link rel="stylesheet" type="text/css" media="screen" title="index.css" href="feuilles_de_style/panneau_droite.css" />
	<link rel="stylesheet" type="text/css" media="screen" title="index.css" href="panneau_droite.css" />

	<!--[if lte IE 6]>
	<style type="text/css">
	li {
	height: 1px;
	}
	</style>
	<![endif]-->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready( function () {
		$("ul.subMenu").hide();
		$(".open_at_load").show();
		
		$("li.toggleSubMenu span").each(function () {
			var TexteSpan = $(this).text();
			$(this).replaceWith('<a href="" title="afficher le sous-menu">' + TexteSpan + '</a>') ;
		});

		$("li.toggleSubMenu > a").click( function () {
			if ($(this).next("ul.subMenu:visible").length != 0) {
				$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
			}
			else {
				$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
				$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
			}
			return false;
		});

	});
	</script>
</head>
<body>

<ul id="navigation">
    <li class="toggleSubMenu"><a href="" title="">Item 1</a>
	<ul class="subMenu" style="display:visible;">
            <li><a href="" title="">Item 3.1</a></li>
            <li><a href="" title="">Item 3.2</a></li>
        </ul>
	</li>
    <li class="toggleSubMenu"><a href="" title="afficher le sous-menu">Item 2</a>
        <ul class="subMenu" style="display: none; ">
            <li> ghhhh</li>

        </ul>
    </li>
    <li class="toggleSubMenu"><a href="" title="afficher le sous-menu">Item 3</a>
        <ul class="subMenu open_at_load" style="display: none; ">
            <li><a href="" title="">Item 3.1</a></li>
            <li><a href="" title="">Item 3.2</a></li>
        </ul>
    </li>
    <li><a href="" title="">Item 4</a></li>
</ul>    


</body>
</html>

secondechance

30 mai 2010 à 14:26:20

oui c'est vrai merci beaocupppppppppp.

menu according

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

menu according

menu according

Supprimer

Modérer

Signaler le message aux modérateurs