Bonjour,
J'ai retravaillé le tuto de l'accordéon jquery du site. Pas de problème sauf à la ligne 97, cette portion de code.
Pas d'explications, c'est plutôt explicite. C'est une des nombreuses solutions que j'ai testé. Pour l'instant, je n'obtient que "afficher le menu". Donc, pour moi, c'est la ligne 99(hasClass) qui n'est pas correcte. Comment cibler ces liens en fontion de la classe open?
Je vous joint le code complet, c'est un test
Modifié par keran (10 Mar 2011 - 00:22)
J'ai retravaillé le tuto de l'accordéon jquery du site. Pas de problème sauf à la ligne 97, cette portion de code.
else {
$('li.toggleSubMenu').each( function() {
if ($(this).hasClass('open'))
$('.toggleSubMenu.open > a').attr({title: 'Cacher le menu'});
else $('.toggleSubMenu > a').attr({title: 'Afficher le menu'});
});
}
Pas d'explications, c'est plutôt explicite. C'est une des nombreuses solutions que j'ai testé. Pour l'instant, je n'obtient que "afficher le menu". Donc, pour moi, c'est la ligne 99(hasClass) qui n'est pas correcte. Comment cibler ces liens en fontion de la classe open?
Je vous joint le code complet, c'est un test
<!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-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr-FR" dir="ltr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="Robots" content="none" />
<title>tests jquery</title>
<!--<link rel="stylesheet" rev="stylesheet" type="text/css" href="skins/defaut/css/styles.css" media="all" />-->
<style type="text/css">
html,body {
font-size: 10pt;
font-family: Verdana, Geneva, Arial, Helvetica, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", sans-serif;
color: #444;
}
#centre {
/*background: url(../images/header2.png) top left no-repeat;*/
margin-left: auto;
margin-right: auto;
width: 780px;
height: 100%;
text-align: left;
}
#navigation {
margin: 0;
padding: 0;
list-style: none;
background-color: #404040;
color: #fff;
width: 200px;
}
#navigation a,#navigation span {
display: block;
padding: 6px 10px;
color: #fff;
text-decoration: none;
height: 18px;
/*background: #000 url(skins/defaut/images/menu-item.png) no-repeat left bottom;*/
background-color: #404040;
}
#navigation .toggleSubMenu a,#navigation .toggleSubMenu span {
background: #000 url(skins/defaut/images/menu-item-deroule.png) no-repeat left top;
}
#navigation .open a,#navigation .open span {
background: #000 url(skins/defaut/images/menu-item-enroule.png) no-repeat left top;
}
#navigation a:hover,#navigation a:focus,#navigation a:active {
color: #C00;
}
#navigation .subMenu {
background: #ccc url(skins/defaut/images/subMenu.png) repeat-x 0 0;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
border-top: 1px solid #666;
}
#navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
li {
height: 1px;
}
</style>
<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="skins/defaut/js/jquery-1.4.4.min.js"></script> -->
<!--<script type="text/javascript" src="skins/defaut/js/plugins/jquery.menus.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
//$().menus({sens: 'vertical',multiNiveaux: false});
function charge() {
if ($('ul.subMenu').hasClass('open_at_load')) {
titre(true);
$("ul.subMenu:not('.open_at_load')").hide();
$('.subMenu.open_at_load').parent('li.toggleSubMenu').addClass('open');
$('.toggleSubMenu.open > a').attr({title: 'Cacher le menu'});
} else titre(true);
}
function titre(tous) {
if (tous == true) {
$('li.toggleSubMenu span').each( function() {
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="ouvrir le menu">' + TexteSpan + '</a>');
});
}
else {
$('li.toggleSubMenu > a').each( function() {
if ($('li.toggleSubMenu').hasClass('open'))
$('.toggleSubMenu.open > a').attr({title: 'Cacher le menu'});
else $('.toggleSubMenu > a').attr({title: 'Afficher le menu'});
});
}
}
charge();
$("li.toggleSubMenu > a").click(function() {
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu")
.slideUp("normal",
function() {
$(this).parent().removeClass("open");
//$(this).parent('a.remp').attr({title: 'Afficher le menu'});
});
titre(false);
}
else {
$("ul.subMenu")
.slideUp("normal",
function() {
$(this).parent().removeClass("open");
//titre(false);
//$(this).parent('a.remp').attr({title: 'Afficher le menu'});
});
$(this).next("ul.subMenu")
.slideDown("normal",
function() {
$(this).parent().addClass("open");
//titre(false);
//$(this).parent('a.remp').attr({title: 'cacher le menu'});
});
titre(false);
}
this.blur();
return false;
});// fin fonction
});
</script>
</head>
<body id="haut">
<div id="centre">
<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>
</div>
</body>
</html>
Modifié par keran (10 Mar 2011 - 00:22)
il remplace par "fermer le menu" mais pour tous les liens parent...mais on s'approche. une condition supplémentaire dans le if, je pense. j'y retourne. C'est fou, je viens de finir un plugin accordeon horizontal bien plus compliqué et là un simple ciblage de lien. Je crois que je vais changer le code et virer ces span.