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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
layui弹出层效果实现代码
May 19 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Python函数调用追踪实现代码
2020/11/27 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
领导班子整改方案
2014/10/25 职场文书
领导干部失职检讨书
2015/05/05 职场文书
求职信如何撰写?
2019/05/22 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL