views:

37

answers:

1

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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..

A: 

You could make that click method quite a lot more readable:

$('#jQtree li').click(function(ev) {
    if (this.children('ul').length > 0) {
        this.children('ul').slideToggle(200); // note that I changed the type
    }
}

Also, .hover() takes two functions as arguments - one for mouseover, and one for mouseout. If you want nothing to happen on mouseout you should probably add an empty function, but most likely what you want to do is this:

$('#jQtree li').hover(
    function() { this.css('cursor':'pointer'); },
    function() { this.css('cursor':'default'); }
);

As a side note, the hover handler you have supplied will execute on both enter and exit, which will keep the cursor as pointer always.

Tomas Lycken
Thanks a lot Tomas,One more small issue with ie6.. i can click on the 'li' tag in all other browser other than ie6, in ie6 the click is going to the label even though 'li' is having a padding of 10px and the label is inside 'li'. if you see my code in ie6 you wont get the collapsing effect, rest all browsers you'll be able to click on 'li' and all the child elements of 'li' will get collapsed with 'slideToggle' function. can you please suggest any solution for this issue..
DKP