je ne sais pas ce qui ne vas pas
si le test fonctionne en copiant collant ton code complet sur une page lambda
dès que j'intègre par copier coller ds ma page, l'item 3 ne se déroule pas
en somme:
ds le css:
#navigation {
margin: 0;
padding: 0;
list-style: none:
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
#navigation a, #navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu-item.png) left bottom no-repeat;
}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
background-image: url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu-item-deroule.png);
}
#navigation .open a, #navigation .open span {
background-image: url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu-item-enroule.png);
}
#navigation a:hover, #navigation a:focus, #navigation a:active {
text-decoration: underline;
}
#navigation .subMenu {
font-size: .8em;
background: #ccc url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
#navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}
.hasJS #navigation ul.subMenu {display: none;}
.hasJS #navigation ul.open_at_load, .hasJS #navigation ul.open {display: block;}
dans la head:
<link href="style.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!--[if lte IE 6]>
<style type="text/css">
#navigation li {
height: 1px;
}
</style>
<! endif -->
<script type="text/javascript">
document.documentElement.className+=" hasJS";
</script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="accordeon.js"></script>
</head>
DAns le body:
<td> <ul id="navigation">
<li><a href="" title="">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu open_at_load">
<li><a href="" title="">Item 2.1</a></li>
<li><a href="" title="">Item 2.2</a></li>
<li><a href="" title="">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>
<ul class="subMenu">
<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>
et le .js:
<script type="text/javascript">
$(document).ready( function () {
$("#navigation li.toggleSubMenu span").each( function () {
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;
$("#navigation 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 {
$("#navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
return false;
});
qu'est ce que je na fais pas correctement??
