网站建设资讯

NEWS

网站建设资讯

jquery收起展开,展开收起怎么实现

jquery 怎么实现展开和收起按钮之间的切换

需要准备的材料分别有:电脑、html编辑器、浏览器。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了九龙坡免费建站欢迎大家使用!

1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。

2、在index.html中的script标签,输入jquery代码:

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

if ($(this).text() === '展开') {

$('input').show();

$(this).text('收起');

} else {

$('input').hide();

$(this).text('展开');

}

});

3、浏览器运行index.html页面,此时显示出了展开按钮。

4、点击展开按钮,此时展开了输入框,并且按钮变成了收齐按钮。

jquery收起展开效果

结构非常稳固

$("h3 i").click(function(){

$(this).parent().parent().find("ul").toggle();//无动画显示隐藏

$(this).parent().parent().find("ul").fadeToggle();// 透明度变化 淡入淡出

$(this).parent().parent().find("ul").slideToggle(); //有个上下滑动动画的展开收起效果 推荐

});

jquery 如何实现多个DIV展开收缩

//给那些div一个共同的属性:比如name="showhide"

$("div[name=showhide]").fadeIn(500);//显示name是showhide的所有div

$("div[name=showhide]").fadeOut(500);//隐藏name是showhide的所有div


网页名称:jquery收起展开,展开收起怎么实现
当前路径:http://cdweb.net/article/dsohhsg.html