һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

ʹCSSjQuery ģselect

[]
11820 websjy 2013-10-19 23:25:00
| ʾȫ¥
1F
ģselect ύȡݵĴ


HTML:
  1. <div id="dropdown">  
  2.      <p>ѡ</p>  
  3.      <ul>  
  4.         <li><a href="#" rel="2"></a></li>  
  5.         <li><a href="#" rel="3">Ϻ</a></li>  
  6.         <li><a href="#" rel="4">人</a></li>  
  7.         <li><a href="#" rel="5"></a></li>  </p><p>   </ul>  
  8. </div>  
  9. <div id="result"></div>
ƴ

JS:
  1. $(function(){
  2. $("#dropdown p").click(function(){
  3.   var ul = $("#dropdown ul");
  4.   if(ul.css("display")=="none"){
  5.    ul.slideDown("fast");
  6.   }else{
  7.    ul.slideUp("fast");
  8.   }
  9. });
  10. $("#dropdown ul li a").click(function(){
  11.   var txt = $(this).text();
  12.   $("#dropdown p").html(txt);
  13.   var value = $(this).attr("rel");
  14.   $("#dropdown ul").hide();
  15.   $("#result").html("ѡ"+txt+"ֵΪ"+value);
  16. });
  17. });
ƴ
CSS:

  1. #dropdown{width:186px; margin:100px auto; position:relative}
  2. #dropdown
  3. p{width:150px; height:24px; line-height:24px; padding-left:4px;
  4. padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif)
  5. no-repeat right 4px; color:#807a62; cursor:pointer}
  6. #dropdown ul{width:184px;
  7. background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; position:absolute;
  8. display:none}
  9. #dropdown ul li{height:24px; line-height:24px;
  10. text-indent:10px}
  11. #dropdown ul li a{display:block; height:24px;
  12. color:#807a62; text-decoration:none}
  13. #dropdown ul li
  14. a:hover{background:#c6dbfc;
  15. color:#369}
  16. #result{margin-top:10px;text-align:center}
ƴ
ͼƬ

аԴ

Ҫ ¼ ſػ鿴ûʺţע  

x
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-11-14 14:41

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б