Jquery控制点击时一、二级菜单自由隐藏与出现

一、基本HTML和CSS

        HTML中产生一、二级导航的代码：

 

　　{loop  $nav  $key  $value}
　　     <div class=”u_con”>             
         <span class=” xg_bt active ”>$value[0]</span>
　　         <ul class=”u_con_list”>
　　             {loop  $sub_nav_list[$key] $k $v}
　　                  <li class=”u_con_item”>
　　                      <a href =”index.php?&view={$key}”>$v[0]</a>
　　                  </li>
　　             {/loop}
　　         </ul>
　　     </div>
　　{/loop}

 

       关键CSS代码：

 

.xg_bt{
     display:block;
     background:url(lis_03.png) no-repeat 70px 4px;
     font-size:12px;color:#666;
     font-weight:bold;
     padding-left:14px;
     margin-bottom:6px; 
     cursor:pointer;
}

.active{
     background:url(lis_01.png) no-repeat 70px 4px;
}

 

 

.u_con_list {

     display :  none ;

     padding-bottom :  12px ;

     width :  100% ;

}

        其中：.xg_bt和.active的css样式添加在了所有的一级菜单上面，由于.active样式写在.xg_bt样式之后，它的background属性会覆盖掉.xg_bt中的background属性，其中：lis_01.png是箭头向右的图片，lis_03是箭头向左的图片。.u_con_list中的样式：display:none;是控制初始化的时候，ul列表是默认隐藏的，初始化的时候是这样显示的：

 

 

                                   

2. Jquery代码解析：

 

$(document).ready(function(){

	$(".u_con .xg_bt").click(function(){
		 $(this).toggleClass("active");
		  $(this).next().toggle();
		  var index = $(".u_con .xg_bt").index(this);
		  $(".u_con .xg_bt").each(function(i){
			  if(i != index){
				  if($(this).next().css("display")=="block"){
					  $(this).next().css("display","none");
				  }
			  }
		  });
	});
})

$(".u_con .xg_bt").click();这个是选中了所有的一级菜单，让它们监听click事件；

 

$(this).toggleClass("active");

             其中：toggleClass在Jquery手册上是这样描述的：如果存在（不存在）就删除（添加）一个类。也就是控制当我们点击一下一级标题，这个.active类就消失，那个被它覆盖的.xg_bt中的background属性就是发生作用，箭头就会向下。

$(this).next().toggle();

             其中：next()在Jquery手册上是这样描述的：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素(可以使用nextAll)。 由于$(this)是取得的span这个标签，它的next()就是ul这个标签了。

             其中：toggle()在Jquery手册上是这样描述的：切换元素的可见状态；如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 这也就是控制我们ul的显示，初始化的时候ul的display默认是none，当点击之后就会变成block，从而显示出来。到这一步的效果会是下面这样的：      

                                    

如果这里到这一步就算了的话，总体实现的效果就是，初始化默认不展开，当点击某个一级标题之后，二级标题列表出现，而且箭头有向右变为向下，当再次点击另一个的时候，另一个也显示出来，但是上一次显示的那个仍然显示，无法隐藏，下面我们要做的就是当点击另一个的时候，将当前已经显示的隐藏掉再显示出当前点击的那个一级标题下的二级标题列表：

var index = $(".u_con .xg_bt").index(this);

       其中：index()在Jquery手册中的描述是：搜索匹配的元素，并返回相应元素的索引值，从0开始计数。如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 这里我们的目的是要取得我们点击的那个一级标题的索引index。

$(".u_con .xg_bt").each(function(i){});

      其中：each()在Jquery手册中的描述是：以每一个匹配的元素作为上下文来执行一个函数。 这个其实也就是相当于一个循环，当我点击一个一级标题的时候，将一级标题列表循环，检查它下面的ul的display的属性，如果是block显示的，就将它隐藏，只显示我当前点击的一级标题下的二级标题列表，这样就实现了我们需要的那个效果。

$(this).next().css("display") == "block";  $(this).next().css("display","none");

        其中：css()在Jquery手册中的描述是：css(name):访问第一个匹配元素的样式属性；css(name,value):在所有匹配的元素中，设置一个样式属性的值。

到这里我们的效果就实现了：

                                    

现在来苏州了，也要坚持每天的学习，加油！！