本文主要介绍了jquery基于事件控制实现点击显示内容下拉效果,涉及jquery事件响应及元素属性动态操作相关技巧,需要的朋友可以参考下，希望能帮助到大家。
1、实例代码：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jQuery事件 body{ font-family:微软雅黑; font-size:12px; font-stretch:normal; background-color:!important; width:400px; height:auto; } .total{ border:#00FF00 solid 1px; font-size:12px; } .module{ padding:6px; font-size:14px; font-weight:bolder; background-color:#FC6; } .content{ padding:8px; font-size:12px; font-family:微软雅黑; text-align:center; display:none; } .open{ background-color:#0000FF; } $(function(){ $(".content").html("你好，欢迎来到脚本之家！"); $(".module").click(function(){ $(this).addClass("open").next(".content").css("display","block"); $(this).css("color","#FFFFF"); }); });
模块
登录后复制
2、实例结果：
（1）初始化
（2）点击“模块”
相关推荐：
JS实现点击循环切换显示内容的方法
Angular实现日程表功能（可添加及隐藏显示内容）详解
Angular4中如何显示内容的CSS样式示例代码
以上就是jQuery实现点击显示内容下拉效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789494.html
