Heim > Artikel > Web-Frontend > jQuery implementiert einen sehr praktischen und schönen Auswahl-Dropdown-Menü-Auswahleffekt_jquery

jQuery implementiert einen sehr praktischen und schönen Auswahl-Dropdown-Menü-Auswahleffekt_jquery

WBOYOriginal: 2016-05-16 15:33:281672Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery einen sehr praktischen und schönen Auswahleffekt für das Dropdown-Menü „Auswählen“ implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schauen Sie sich zunächst die folgenden Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>实用漂亮的select下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{font-size:12px;}
.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(images/selectbg.jpg) right 0px no-repeat;color:#fff;}
.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}
ul{list-style:none;margin:0;padding:0;}
ul li{height:24px;background:#666px;text-align:center;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var selects=$("#select");
  var options=$("#option");
  var state=true;
  selects.click(function(){
   if(state){
   if(!($(this).is(":animated"))){
    options.slideDown();
   }else{
    options.css("display","none");
  }  
   state=false;
   }else{
   if(!($(this).is(":animated"))){
   options.slideUp();
   }else{
    $(this).stop(true,true);
    options.css("display","");
   }
   state=true;
   }
  });
 selects.hover(function(){
 $(this).css("background","url(images/selectbg2.jpg) right 0px no-repeat");
 },
 function(){
 $(this).css("background","url(images/selectbg.jpg) right 0px no-repeat");
 });
  $("li").hover(function(){
   $(this).css("background","#990000").css("color","#ff9900");
  },
  function(){
   $(this).css("background","#820014").css("color","#fff");
  });
  $("li").click(function(){
   $(this).css("background","#c00").css("color","#ffffff");
   options.css("display","none");
   selects.children("span").text($(this).attr("tip"));
   $(".valt").val($(this).attr("tip"));
   state=false;
  });
  options.click(function(){
   selects.click(function(){return false;});
  });
 })
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
您的选择是：<input type="text" class="valt" value="">
<div class="select" id="select"><span>请选择分类</span>
 <div class="option" id="option">
  <ul>
   <li tip="推荐课程">推荐课程</li>
   <li tip="资讯中心">资讯中心</li>
   <li tip="辅导专区">辅导专区</li>
   <li tip="公职考试">公职考试</li>
   <li tip="司法考试">司法考试</li>
   <li tip="报关、报检员">报关、报检员</li>
   <li tip="高考辅导">高考辅导</li>
   <li tip="招生简章">招生简章</li>
   <li tip="招生信息">招生信息</li>
   <li tip="学员专区">学员专区</li>
   <li tip="公计培训">公计培训</li>
   <li tip="名师团队">名师团队</li>
   <li tip="辅导教材">辅导教材</li>
  </ul>
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erzielen Sie Ein- und Ausblendeffekte in js_javascript-FähigkeitenNächster Artikel：So erzielen Sie Ein- und Ausblendeffekte in js_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen