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 二维数组
Nov 26 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP asXML()函数讲解
2019/02/03 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
Angular2之二级路由详解
2018/08/31 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
Java程序员面试题
2016/09/27 面试题
电钳专业个人求职信
2014/01/04 职场文书
酒吧创业计划书
2014/01/18 职场文书
教堂婚礼主持词
2014/03/14 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
php双向队列实例讲解
2021/11/17 PHP
Python实现抖音热搜定时爬取功能
2022/03/16 Python
Python安装使用Scrapy框架
2022/04/12 Python