列表展开隐藏php代码,jquery 切换数量,动态改变样式，隐藏展开

前几天给大家分享了关于 jquery 的常用语法，碰巧最近写了一个带有 jquery 功能的页面，页面中包含了赋值、隐藏、展开、点击事件等功能，这里给大家拆分说一说。

请务必先查看页面效果，然后在看下面的拆读。

一、点击右侧的 + ，会出现数字框，每点击一次 + ，则数字框的内容会加 1 。

$('.jia').click(function(){

//获取当前的数字框里的数值

currNum = parseInt($(this).siblings('.num').text());

newNum = parseInt(currNum+1);

$(this).siblings('span').show();

//对数字框加 1 后，重新赋值

$(this).siblings('.num').text(newNum);

})

二、点击右侧的 “-” 号，，则数字框的内容会减少 1，当减 1 完成后，如果最新值为 0 ，则隐藏数字框 。

$('.jian').click(function(){

//获取当前的数字框里的数值

currNum = parseInt($(this).siblings('.num').text());

newNum = parseInt(currNum-1);

//对数字框减 1 后，重新赋值,如果最新值为 0 ，则隐藏数字框

if(newNum==0){

$(this).hide();

$(this).siblings('.num').hide();

}else{

$(this).siblings('.num').text(newNum);

}

})

三、点击左侧菜单

1、如果当前点击的左侧菜单下没有二级菜单，那么给当前点击的菜单添加一个 class ，同时将其同级元素的样式改为非选中的 class。

2、如果当前点击的左侧菜单下有二级菜单，那么给当前点击的菜单添加一个 class ，同时将其同级元素的样式改为非选中的 class，另外，将当前点击菜单的第一个子菜单也添加一个 class 表示当前选中；

当点击二级菜单时，给当前点击的菜单添加一个 class ，同时将其同级元素的样式改为非选中的 class。

//这里是点击一级菜单时的事件

$('.litem').click(function(){

$(this).siblings().children('.pritem').removeClass('active');

$(this).siblings().children('.cleftitem').hide();

$(this).children().show();

$(this).children('.pritem').addClass('active');

});

//这里是点击二级菜单时的事件

$('.cleftitem').click(function(){

$(this).addClass('active');

$(this).siblings('.cleftitem').removeClass('active');

});

这个例子中，用到了很多常用到知识点，如果看懂上例并且可以自己写出来，那么我想，jquery 你算是入门了。