jquery 一个显示二级导航栏有关问题-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20345 次

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

JScript code


<!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事件，显示当前的兄弟节点的内容。比如点击"四期符合"，然后显示出下面的

CSS code


<ul class="test">
<li class="list1 sp">奇峰异次</li>
<li class="list1 sp">劳技课从</li>
</ul>

有人帮忙看看，为什么这样写出不来呢？谢谢！

------解决方案--------------------

CSS code

.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;
}

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

------解决方案--------------------

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>