麻烦懂jquery的朋友帮忙看看


$(function(){   
    var $temp = $('.has_children');   
    if($temp.hasClass("highlight")){   
        $('.has_children').click(function(){   
            $(this).removeClass("highlight").children("a").hide();   
        });   
    }else{   
        $('.has_children').click(function(){   
            $(this).addClass("highlight").children("a").show().end()   
            .siblings().removeClass("highlight").children("a").hide();   
        });   
    }   
       
});  
<body>
 <div id="menu">   
        <div class="has_children">   
            <span>A组</span>   
            <a>南非</a>   
            <a>墨西哥</a>   
            <a>乌拉圭</a>   
            <a>法国</a>   
        </div>   
        <div class="has_children">   
            <span>B组</span>   
            <a>阿根廷</a>   
            <a>尼日利亚</a>   
            <a>韩国</a>   
            <a>希腊</a>   
        </div>   
        <div class="has_children">   
            <span>C组</span>   
            <a>英格兰</a>   
            <a>美国</a>   
            <a>阿尔及利亚</a>   
            <a>斯洛文尼亚</a>   
        </div>   
        <div class="has_children">   
            <span>D组</span>   
            <a>德国</a>   
            <a>澳大利亚</a>   
            <a>塞尔维亚</a>   
            <a>加纳</a>   
        </div>   
    </div>  </body>
<style type="text/css">
#menu {width: 100px}   
.has_children{   
    background: #555;   
    color: #fff;   
    cursor: pointer;   
}   
.highlight{   
    color: #fff;   
    background: green;   
}   
div{   
    padding: 0;   
    margin: 10px 0;   
}   
div a{   
    background: #888;   
    display: none;   
    float: left;   
    width: 100px;   </style>
为什么我点击父节点的时候不能展开子节点呢？

解决方案 »

  1.   

    用什么浏览器测试的？ IE 7,8 ff3.5下测上述代码可以打开各组的子菜单
      

  2.   

    你jquery引用正确了吗？我IE8 是正确的啊。你有报啥错误吗？
      

  3.   

    什么错都没   我用的IE6.浏览器禁用JS也不大可能  
      

  4.   

    找到错了。。原来不能这样引用
     <script language="javascript"  src="jquery-1.3.2.js" />
    <script type="text/javascript" language="javascript">   </script>我改成这样才行
     <script language="javascript"  src="jquery-1.3.2.js" ></script>
    <script type="text/javascript" language="javascript">   </script>
    晕死。。问下LS的朋友，点击展开可以，在点击下如何关闭该展开的节点？
      

  5.   

    $('.has_children')slideToggle(500);
    不就OK了！！！
      

  6.   


    写在哪里？ 本人刚学JQUERY  不是太懂
      

  7.   

    给你粘贴个 代码看。。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>菜单</title>
    <link type="text/css" rel="stylesheet" href="css/menu.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
    </head>
    <body>
    <ul>
    <li class="main">
    <a href="#">主菜单1</a>
    <ul>
    <li><a href="#">我是菜单1的下的-1</a></li>
    <li><a href="#">我是菜单1下的-2</a></li>
    </ul>
    </li>
    <li class="main">
    <a href="#">主菜单2</a>
    <ul>
    <li><a href="#">我是菜单2的下的-1</a></li>
    <li><a href="#">我是菜单2下的-2</a></li>
    </ul>
    </li>
    <li class="main">
    <a href="#">主菜单3</a>
    <ul>
    <li><a href="#">我是菜单3的下的-1</a></li>
    <li><a href="#">我是菜单3下的-2</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
      

  8.   


    ul,li{
    /*清除UL,LI的默认样式*/
    list-style: none;
    }
    ul{
    /*清除子菜单缩进值*/
    padding: 0px;
    margin: 0px;
    }
    .main{

    background-image: url(../img/tt_03.gif);
    background-repeat: repeat-x;
    width: 160px;
    }
    .main a{
    color: #397BCE;
    background-image: url(../img/left_7_03.gif);
    background-repeat: no-repeat;
    background-position: 3px center;
    }
    .main li a{
    color: black;
    background-image: none;
    }.main ul{
    display: none;
    }li{
    background-color:#E8F2FE; 
    }
    a{
    /*取消所有的下划线*/
    text-decoration: none;
    padding-left: 20px;
    display: block;
    /*IE6下a标签充满整个区域*/
    display: inline-block;
    width: 140px;
    padding-top: 3px;
    padding-bottom: 3px;
    }
      

  9.   


    $(function(){
    $(".main>a").click(function() {
    //找到主菜单项所对应的子菜单项
    var ulNode=$(this).next("ul");
    /*原始方法
     * if(ulNode.css("display")=="none")
    {
    ulNode.css("display","block");
    } else
    {
    ulNode.css("display","none");
    }*/
                    //jquery提供方法
                    //ulNode.toggle(500);
    ulNode.slideToggle(600);
    });
    });