您的位置:首页 > Web前端 > JQuery

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: