首页>>Jquery文字>>jquery搜索框下拉列表选择搜索分类效果(2014-07-25)

jquery搜索框下拉列表选择搜索分类效果

jquery搜索框下拉列表选择搜索分类效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo">  
  2.   
  3.         <form action="" method="post" name="searchform" id="searchform" class="searchinfo">  
  4.             <ul class="clearfix">  
  5.                 <li>  
  6.                     <input type="text" name="keyword" value="" id="keyword" class="text searchtext" />  
  7.                     <span class="arrowDown"></span>  
  8.                 </li>  
  9.                 <li><input type="submit" value="搜索" class="button searchbtn" /></li>  
  10.             </ul>  
  11.             <ul class="dropdown clearfix" style="display:none;">  
  12.                 <li class="tit_filter">过滤搜索</li>  
  13.                 <li><input type="checkbox" id="all"/><label for="all"><strong>所有分类</strong></label></li>  
  14.                 <li><input type="checkbox" id="Automotive" /><label for="Automotive">汽车</label></li>  
  15.                 <li><input type="checkbox" id="Baby" /><label for="Baby">婴儿</label></li>  
  16.                 <li><input type="checkbox" id="Beauty" /><label for="Beauty">美女</label></li>  
  17.                 <li><input type="checkbox" id="Books" /><label for="Books">书籍</label></li>  
  18.                 <li><input type="checkbox" id="Cell" /><label for="Cell">手机</label></li>  
  19.                 <li><input type="checkbox" id="Cloth" /><label for="Cloth">服装</label></li>  
  20.                 <li><input type="checkbox" id="Electronics" /><label for="Electronics">电子产品</label></li>  
  21.                 <li><input type="checkbox" id="Gourmet" /><label for="Gourmet">美食</label></li>  
  22.                 <li><input type="checkbox" id="Health" /><label for="Health">保健</label></li>  
  23.                 <li><input type="checkbox" id="Home" /><label for="Home">家居与园艺</label></li>  
  24.                 <li><input type="checkbox" id="Industrial" /><label for="Industrial">产业</label></li>  
  25.                 <li><input type="checkbox" id="Jewelry" /><label for="Jewelry">首饰</label></li>  
  26.                 <li><input type="checkbox" id="Magazines" /><label for="Magazines">杂志</label></li>  
  27.             </ul>  
  28.         </form>  
  29.     </div>  
  30.   
  31.     <script type="text/javascript">  
  32.     $(function() {  
  33.       
  34.         var $ui = $('#searchform');  
  35.           
  36.         /** 对焦点上单击“显示”下拉列表中, 和更改的箭头图像 **/  
  37.         $ui.find('.searchtext').bind('focus click',function(){  
  38.             $ui.find('.arrowDown').addClass('arrowUp').removeClass('arrowDown').andSelf().find('.dropdown').slideDown(500);  
  39.         });  
  40.       
  41.         /** 鼠标离开隐藏下拉，和更改的箭头图像 **/  
  42.         $ui.bind('mouseleave',function(){  
  43.             $ui.find('.arrowUp').addClass('arrowDown').removeClass('arrowUp').andSelf().find('.dropdown').slideUp(500);  
  44.         });  
  45.       
  46.         /** 选择所有的复选框 **/  
  47.         $ui.find('.dropdown').find('label[for="all"]').prev().bind('click',function(){  
  48.             $(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);  
  49.         });  
  50.           
  51.     });  
  52.     </script>     

 


原文地址:http://www.freejs.net/article_jquerywenzi_389.html