jQuery: issue on onclick of "LI"
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="开发者_如何学Ctext/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..
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.
加载中,请稍侯......
精彩评论