$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
if($(this).children().is(":hidden")){
//如果子项是隐藏的则显示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//如果子项是显示的则隐藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件

//对于没有子项的菜单,统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});哪位帮忙解释下第三行的if(this==e.target)是什么意思啊?

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>多级菜单</title>
    <style type="text/css">
    <!--
    ul{
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    }
    li{
    padding:1px; margin:0px;
    }
    -->
    </style>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
    $(function(){
    $("li:has(ul)").click(function(e){
    if(this==e.target){
    if($(this).children().is(":hidden")){
    //如果子项是隐藏的则显示
    $(this).css("list-style-image","url(minus.gif)")
    .children().show();
    }else{
    //如果子项是显示的则隐藏
    $(this).css("list-style-image","url(plus.gif)")
    .children().hide();
    }
    }
    return false; //避免不必要的事件混绕
    }).css("cursor","pointer").click(); //加载时触发点击事件

    //对于没有子项的菜单,统一设置
    $("li:not(:has(ul))").css({
    "cursor":"default",
    "list-style-image":"none"
    });
    });
    </script>
    </head>
    <body>
    <ul>
    <li>第1章 Javascript简介</li>
    <li>第2章 Javascript基础</li>
    <li>第3章 CSS基础
    <ul>
    <li>第3.1节 CSS的概念</li>
    <li>第3.2节 使用CSS控制页面
    <ul>
    <li>3.2.1 行内样式</li>
    <li>3.2.2 内嵌式</li>
    </ul>
    </li>
    <li>第3.3节 CSS选择器</li>
    </ul>
    </li>
    <li>第4章 CSS进阶
    <ul>
    <li>第4.1节 div标记与span标记</li>
    <li>第4.2节 盒子模型</li>
    <li>第4.3节 元素的定位
    <ul>
    <li>4.3.1 float定位</li>
    <li>4.3.2 position定位</li>
    <li>4.3.3 z-index空间位置</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
      

  2.   

    哪位帮忙解释下第三行的if(this==e.target)是什么意思啊?这个就是当前对象是否处于操作状态