3
jQuery me rend fou. Ive a regardé sur le web pour un simple curseur d'expansion de catégorie, mais n'en a pas trouvé un. J'ai essayé d'en créer un ici.jquery ne fonctionne pas (PAS IE)
Le problème que j'ai est quand vous essayez de cacher() un élément précédemment show() n. Si un autre élément est show() n avant que hide() soit appelé, l'appel à hide() pour le premier élément est ignoré! Pardonnez-moi de publier le code HTML complet (n'hésitez pas à nous suggérer où je devrais héberger des échantillons de code entiers à l'avenir).
Si quelqu'un a des suggestions pour un plugin jQuery ou une autre implémentation de ce que j'essaie de faire, s'il vous plaît pointez-moi dans cette direction - je suis heureux d'utiliser quelque chose déjà fait.
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$().ready(function() {
$("ul.box_li li.parent").mouseenter(function(event){
event.stopPropagation();
$(this).children("ul:first").show('slide',{direction: 'left'});
}).mouseleave(function(event){
event.stopPropagation();
$(this).children("ul:first").hide('slide',{direction: 'left'});
});
});
</script>
<style type="text/css">
body {font-size:10pt;}
ul.box_li li.parent {position:relative;}
ul.box_li li {background-color:#e6e6e6;width:200px;border:1px solid red;list-style-type:none;padding:5px;}
ul.box_li>li ul {display: none;position: absolute;top: 0;left: 100%;}
</style>
</head>
<body>
<ul class="box_li">
<li class="parent">
FIRST
<ul>
<li class="parent">
FIRST_SUB_1
<ul>
<li>FIRST_SUB_1_SUB_1</li>
<li>FIRST_SUB_1_SUB_2</li>
<li>FIRST_SUB_1_SUB_3</li>
<li>FIRST_SUB_1_SUB_4</li>
</ul>
</li>
<li>FIRST_SUB_2</li>
</ul>
</li>
<li class="parent">
SECOND
<ul>
<li>SECOND_SUB_1</li>
<li>SECOND_SUB_2</li>
<li>SECOND_SUB_3</li>
<li>SECOND_SUB_4</li>
<li>SECOND_SUB_5</li>
<li>SECOND_SUB_6</li>
<li>SECOND_SUB_7</li>
<li>SECOND_SUB_8</li>
</ul>
</li>
<li class="parent">
THIRD
</li>
<li class="parent">
FOURTH
<ul>
<li>FOURTH_SUB_1</li>
<li>FOURTH_SUB_2</li>
<li>FOURTH_SUB_3</li>
<li>FOURTH_SUB_4</li>
<li>FOURTH_SUB_5</li>
<li>FOURTH_SUB_6</li>
<li>FOURTH_SUB_7</li>
<li>FOURTH_SUB_8</li>
</ul>
</li>
<li class="parent">
FIFTH
<ul>
<li>FIFTH_SUB_1</li>
<li>FIFTH_SUB_2</li>
<li>FIFTH_SUB_3</li>
<li>FIFTH_SUB_4</li>
<li>FIFTH_SUB_5</li>
<li>FIFTH_SUB_6</li>
</ul>
</li>
</ul>
</body>
</html>
+1 Laissez-moi être le premier à vous souhaiter la bienvenue! – Dubs