搜索框的下拉选择功能

2024-10-13 09:35:07

1、新建html文档。

3、书写hmtl代艨位雅剖码。<div class="box"> <div class=searchbg></div> <div class=searchContainer> <div class=searchselect> <SPAN id=type typename="song">歌曲</SPAN> <A class=searchselectbtn href="#"></A> <ul id=selectTypeList> <li typename="song"><A class=current href="#">歌曲</A> </li> <li typename="singer"><A href="#">歌手</A> </li> <li typename="album"><A href="#">专辑</A> </li> <li typename="album"><A href="#">MP3</A> </li> <li typename="album"><A href="#">DV</A> </li> <li typename="songlist"><A href="#">歌单</A> </li> <li typename="radio"><A href="#">电台</A> </li> <li class=last></li> </ul> </div> <INPUT id=key type="text" value="收索"><A class=searchbtn id=searchbtn href="#"></A> </div></div>

5、书写并添加js代码。<SCRIPT src="js/jquery-1.4.2.min.js" ></SCRIPT><SCRIPT>var selectListShow = 0;$(function(){ $("#type,.searchselectbtn").click(function(){ if (selectListShow){ $("#selectTypeList").slideUp("fast"); selectListShow = 0; }else{ $("#selectTypeList").slideDown("fast"); selectListShow = 1; } return false; }); $("body").click(function(){ if (selectListShow){ $("#selectTypeList").slideUp("fast"); selectListShow = 0; } }); $(".searchselect li").click(function(){ $("#type").text($(this).text()); $("#type").attr("typename",$(this).attr("typename")); $(this).parent().hide(); }); }); </SCRIPT>

7、查看效果。