jQuery点击弹出下拉菜单的小例子


Posted in Javascript onAugust 01, 2013
<title>导航——点击弹出内容</title>
    <style type="text/css">
.navgation{margin:0;padding:0;list-style-type:none;position:relative;}
.navgation li {float:left;}
.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}
.navgation div{display:none;position:absolute;top:30px;}
</style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".navgation input").each(function () {
                var this_div = $(".navgation div");
                var _inx = $(".navgation input").index(this);
                $(this).click(
                function () { this_div.eq(_inx).slideToggle(); },
                function () { this_div.eq(_inx).slideToggle(); }
           );
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul class="navgation">
            <li><input type="button" id="button" value="链接1"/>
            <div>这里放下拉内容1</div>
            </li>
            <li><input type="button" id="button1" value="链接2"/>
            <div>这里放下拉内容2</div>
            </li>
            <li><input type="button" id="button2" value="链接3"/>
            <div>这里放下拉内容3</div>
            </li>
            <li><input type="button" id="button3" value="链接4"/>
            <div>这里放下拉内容4</div>
            </li>
            <li><input type="button" id="button4" value="链接5"/>
            <div>这里放下拉内容5</div>
            </li>
        </ul>
    </div>
    </form>
</body>
Javascript 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JS调用CS里的带参方法实例
Aug 01 #Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 #Javascript
子窗体与父窗体传值示例js代码
Aug 01 #Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 #Javascript
jquery图片放大功能简单实现
Aug 01 #Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 #Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 #Javascript
You might like
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
大一军训感言
2014/01/09 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
检讨书怎么写
2015/01/23 职场文书
三下乡个人总结
2015/03/04 职场文书
师范生教育见习总结
2015/06/23 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
python中数组和列表的简单实例
2022/03/25 Python
python turtle绘图
2022/05/04 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript