jquery 一个显示二级导航栏问题


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>test </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="js/jquery-1.7.js"></script>
  <script type="text/javascript">
$(".clicko").click(function(){
$(this).parent().find('.test>li').show();
})
 </script>
  <style type="text/css">
.listimages
{
list-style-type:none;
font-size:16px;
float:left;
margin:0;
}
.list1
{
list-style-type:none;
background:url(images/2.jpg) no-repeat top center;
padding:10px 0 0 0px;
margin:0;
display:none;
}
.test li
{
display:none;
}
.sp
{
float:left;
display:inline;
width:14px;
font-size:14px;
word-wrap:break-word;
word-break:nomal;
margin:0 10px 0 0;
}
</style>
</head>
<body>
<ul><li class="listimages">
<div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">流逝岁月</div>
<ul class="test">
<li class="list1 sp"><a href="#">作风友情</a></li>
<li class="list1 sp"><a href="#">告诉你啊</a></li>
</ul>
</li><li class="listimages">
<div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">学不思路</div>
<ul class="test">
<li class="list1 sp">奇峰异次</li>
<li class="list1 sp">劳技课从</li>
</ul>
</li><li class="listimages">
<div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">走路风情</div>
<ul class="test">
<li class="list1 sp">奇峰异次</li>
<li class="list1 sp">劳技课从</li>
</ul>
</li><li class="listimages">
<div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">四期符合</div>
<ul class="test">
<li class="list1 sp">奇峰异次</li>
<li class="list1 sp">劳技课从</li>
</ul>
</li></ul>
</body>
</html>
触发类clicko的click事件，显示当前的兄弟节点的内容。比如点击"四期符合"，然后显示出下面的<ul class="test">
<li class="list1 sp">奇峰异次</li>
<li class="list1 sp">劳技课从</li>
</ul>
有人帮忙看看，为什么这样写出不来呢？谢谢！

解决方案 »

  1.   

    你的写法是对的，但没包起来！
    $(document).ready(function(){
        $(".clicko").click(function(){
            $(this).parent().find('.test>li').show();
        })
    })
      

  2.   

    .list1
    {
    list-style-type:none;
    background:url(images/2.jpg) no-repeat top center;
    padding:10px 0 0 0px;
    margin:0;
    display:none;
    }
    .test li
    {
    display:none;
    }
    上面的display:none;删除掉，直接写.test{
    display:none;
    }
    原因是子元素会继承父元素的display，然后js代码这样写就可以了
    <script type="text/javascript">
      $(".clicko").click(function(){
        $(this).next(".test").show();
      })
    </script>
    这段代码要写在body标签结束之前，按你那样写是失效的，除非用
    <script type="text/javascript">
      $(".clicko").live('click',function(){
        $(this).next(".test").show();
      })
    </script>
    因为浏览器在解析运行这段代码时dom树里面还不存在$(".clicko")
      

  3.   

    你写少了$(function(){});
    $(function(){
    $(".clicko").click(function(){
    $(this).parent().find('.test>li').show();
    });
    });
      

  4.   

    你写少了加载函数$(function{})或$(document).ready(){}
    $(function(){
    $(".clicko").click(function(){
    $(this).parent().find('.test>li').show();
    });
    });
      

  5.   

    非常感谢楼上各位的帮忙，我进一步学习的时候，使用了togger()函数来实现：
    使用非注释的jquery代码，出现了点击一次可以展开，但是点另外一个只能关闭这个展开的，要再点一次才可以展开二级导航栏的问题<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>test </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script src="js/jquery-1.7.js"></script>
     <script type="text/javascript">
    $(document).ready(function(){
        $(".clicko").toggle(function(){
    $(".list1").hide();
    $(this).parent().find('.test>li').show();
        },
    function(){
    $(".list1").hide();
    $(this).parent().find('.test>li').hide();
    }
    )
    })
     </script> 
    <!-- <script type="text/javascript">
    $(document).ready(function(){
        $(".clicko").click(function(){
         $('.list1').hide();
             $(this).parent().find('.test>li').toggle();
        })
    })
     </script> -->
      <style type="text/css">
    .listimages
    {
    list-style-type:none;
    font-size:16px;
    float:left;
    margin:0;
    }
    .list1
    {
    list-style-type:none;
    background:url(images/2.jpg) no-repeat top center;
    padding:10px 0 0 0px;
    margin:0;
    display:none;
    }
    .test li
    {
    display:none;
    }
    .sp
    {
    float:left;
    display:inline;
    width:14px;
    font-size:14px;
    word-wrap:break-word;
    word-break:nomal;
    margin:0 10px 0 0;
    }
    </style>
    </head>
    <body>
    <ul><li class="listimages">
    <div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">流逝岁月</div>
    <ul class="test">
    <li class="list1 sp"><a href="#">作风友情</a></li>
    <li class="list1 sp"><a href="#">告诉你啊</a></li>
    </ul>
    </li><li class="listimages">
    <div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">学不思路</div>
    <ul class="test">
    <li class="list1 sp">奇峰异次</li>
    <li class="list1 sp">劳技课从</li>
    </ul>
    </li><li class="listimages">
    <div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">走路风情</div>
    <ul class="test">
    <li class="list1 sp">奇峰异次</li>
    <li class="list1 sp">劳技课从</li>
    </ul>
    </li><li class="listimages">
    <div style="width:1em;float:left;font-weight:bold;cursor:pointer" class="clicko">四期符合</div>
    <ul class="test">
    <li class="list1 sp">奇峰异次</li>
    <li class="list1 sp">劳技课从</li>
    </ul>
    </li></ul>
    </body>
    </html>
      

  6.   

    你说话很难听懂。
    个人觉得比较合理：点击任意一个关闭其他所有，并打开本身的二级菜单！$(document).ready(function(){
            $(".clicko").click(function(){
                $(".test>li").hide();
                $(this).parent().find('.test>li').show();
            })
        });
      

  7.   

        $(document).ready(function(){
            $(".clicko").toggle(function(){
                $(".test>li").hide();
                $(this).parent().find('.test>li').show();
            },function(){
                $(".test>li").hide();
            })
        });