Hi all,
jQuery is driving me nuts. Ive looked around on the web for a simple category expander slider but haven't found one. Ive attempted to create one here.
The problem I'm having is when trying to hide() an element previously show()n. If another element is show()n before the hide() is called, the call to hide() for the first element is ignored!
Forgive me for posting the full HTML (please feel free to suggest where I should host entire code samples in future).
If anyone has any suggestions for a jQuery plugin or another implementation of what I'm trying to do, please point me in that direction - I'm happy to use something already made.
<!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>