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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
微信小程序地图实现展示线路
Jul 29 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JS中数组重排序方法
2016/11/11 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
酒店管理毕业生自荐信
2013/10/24 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
教师教育心得体会
2016/01/19 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Golang 遍历二叉树
2022/04/19 Golang
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技