jquery用div实现下拉列表的效果
2013-10-09 11:40
495 查看
<script type="text/javascript"> function showSearchList() { if ($('#searchList').is(":visible") == true) { $('#searchList').hide(); } else { $('#searchList').show(); } } $(function() { $('#serachDiv').blur(function() { //这句很重要用来实现点击其他地方的时候,隐藏div(触发焦点事件) $('#searchList').hide(); }) $('#searchList li').click(function() { $("#searchCategory").html($(this).text()); $('#searchList').hide(); }); $("#hightsearch").click(function() { window.open('/News/ZhengHeGaoJiSearch.aspx'); }) }) function searchClink() { var name = $.trim($("#searchCategory").text()); var title = escape($("#searchTitle").val()); if (title == '') { alert('关键词不能用空!'); return; } var site; switch (name) { case "政务新闻": site = '999'; break; case "网上办事": site = '6'; break; case "便民服务": site = '8'; break; case "政府信息公开": site = '5'; break; default: site = '7'; break; } if (site == '6') { var url = '/2010/eService/eServiceItemList.aspx?type=0&title=' + title; window.open(url); } else if (site == '7') { var url = '/AuthorityPublic/AuthorityList.aspx?kw=' + title; window.open(url); } else if (site == '8') { var url = '/2010/Bmfw/SearchResult.aspx?fcheckbox=3&fullname=' + title; window.open(url); } else { var url = '/News/ResultSearch.aspx?searchType=&selectSite=' + site + '&keyword=' + title; window.open(url); } } </script> <div class="selectSearch" id="serachDiv"> <h1 onclick="showSearchList()" id="searchCategory"> 政务新闻</h1> <div class="optionSearch" id="searchList" style="display: none;"> <ul> <li class="bor_top">政务新闻</li> <li>网上办事</li> <li>便民服务</li> <li>政府信息公开</li> <li>行政职权公开</li> </ul> </div> </div>
相关文章推荐
- jQuery实现下拉列表移动 效果
- jQuery实现带延迟的二级tab切换下拉列表效果
- JS+DIV+CSS实现仿表单下拉列表效果
- JS+DIV+CSS实现仿表单下拉列表效果
- jQuery实现带延迟的二级tab切换下拉列表效果
- jquery 操作单选框,复选框,下拉列表实现代码
- jquery 控制 div 滚动条一直在最底部,实现刷频效果
- RecyclerView+PopupWindow实现下拉列表选择效果
- jQuery实现输入框下拉列表树插件特效代码分享
- 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
- jquery简单实现滚动条下拉DIV固定在头部不动
- jQuery实现带动画效果的二级下拉导航方法
- jQuery DIV弹出效果实现代码
- jQuery实现仿腾讯视频列表分页效果的方法
- jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
- jquery实现多选下拉列表
- javascript 实现 下拉列表的链接效果
- 用jquery实现下拉列表
- 基于MVC3方式实现下拉列表联动(JQuery)
- jquery,json,struts2整合开发(实现下拉列表)