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 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
js document.write()使用介绍
Feb 21 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
详解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
如何使用脚本模仿登陆过程
2006/11/22 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
实例讲解Python中函数的调用与定义
2016/03/14 Python
使用python绘制常用的图表
2016/08/27 Python
Python常用库推荐
2016/12/04 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python如何使用unittest测试接口
2018/04/04 Python
keras 读取多标签图像数据方式
2020/06/12 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
英语教师岗位职责
2014/03/16 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
劳动仲裁调解书
2015/05/20 职场文书
社区低保工作总结2015
2015/07/23 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Python WSGI 规范简介
2021/04/11 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
java实现web实时消息推送的七种方案
2022/07/23 Java/Android