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 打地鼠游戏代码说明
Oct 12 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
JavaScript表单验证开发
Nov 23 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
jquery 手势密码插件
Mar 17 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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/10/09 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
php 函数中使用static的说明
2012/06/01 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP分享图片的生成方法
2018/04/25 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
StringBuilder和String的区别
2015/05/18 面试题
大学生个人求职信范文
2013/09/21 职场文书
培训主管的岗位职责
2013/11/23 职场文书
大二学习计划书范文
2014/04/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
作文评语集锦
2014/12/25 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers