jquery制作选项卡

制作选项卡

css样式

html部分

• 心情
  1
  
  


• 日志
  2
  
  


• 随笔
  3
  
  


• 分享
  4
  
  

方法一

$(function(){
// console.log($("ul li"))

$("ul li ").mouseover(function(){
// console.log($(this).children("ul"));
$(this).children("ul").show();
$(this).siblings("li").children("ul").hide();
// $(this).children("ul").hide();

}).mouseout(function(){
$(this).children("ul").hide();
})
})

方法二

$(function(){
$("ul li").click(function(){
if($(this).children("ul").is(":hidden")){
$(this).children("ul").slideDown();
$(this).siblings("li").children("ul").hide();
}else{
$(this).children("ul").slideUp();
}
})
})

方法三

$(function(){
$("ul li").click(function(){
$(this).siblings("li").children("ul").hide();
$(this).children("ul").slideDown().siblings("li").children("ul").slideUp();
})
})

方法四

$(function(){
$("ul li").click(function(){
$(this).siblings("li").children("ul").hide();
$(this).children("ul").slideToggle();
})
})