hi friends, i've a problem with jquery: on click of "li" function, various ie versions are acting differently.. here is the html code.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
html,body{
font: 90% arial, tahoma, verdana #333 normal;
margin:0;
padding:0;
}
#treeDiv
{
width:250px;
background-color:#C4E4EE;
border:#6BB8DC solid 1px;
margin:10px;
}
ul#jQtree{
list-style-type:none;
margin:10px;
padding:0;
background-color:#fff;
}
ul#jQtree li
{
padding:5px 10px 5px;
border:#CCC solid 1px;
}
ul#jQtree li label
{
background-color:#666;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//on mouseover of li, change cursor to hand
$('#jQtree li').hover(function(){ $(this).css({'cursor':'hand'})});
//on click of li, if there are subnodes for it, hide it.
$('#jQtree li').click(function(event){
if(event.target.nodeName == "LI" && $(event.target).children('ul').length > 0){
$(this).children('ul').slideToggle("200");
}
});
});
</script>
</head>
<body>
<div id="treeDiv">
<ul id="jQtree">
<li>
<label>Main Node</label>
<ul>
<li><label>Sub Node 1</label></li>
<li><label>Sub Node 2</label></li>
<li><label>Sub Node 3</label></li>
<li><label>Sub Node 4</label></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I've written jquery onclick function only for the "LI"s having children of "UL". it is working in ie8, even in ie7 but the difference is that onclick of inside "LI" only it works in ie8, whereas in ie7, onclick of outside "LI" margin also it works. And finally in ie6, the cursor is blinking and sometimes it becomes hand, and then u've to click otherwise it wont work. can anybody help me to fix this issue in all ie versions. any hack??? Anybody pls guide me to make it work..