Implementierung eines einfachen Klappmenüeffekts basierend auf jQuery

Implementierung eines einfachen Klappmenüeffekts basierend auf jQuery_jquery

WBOY

Freigeben： 2016-05-16 15:30:22

Original

1669 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den Code zum Implementieren eines einfachen Faltmenüeffekts mithilfe von JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Der HTML-Code lautet wie folgt:

<div class="box">
  <p>菜单一</p>
  <ul>
   <li><a>1111</a></li>
   <li><a>1111</a></li>
   <li><a>1111</a></li>
  </ul>
  <p>菜单二</p>
  <ul>
   <li><a>2222</a></li>
   <li><a>2222</a></li>
   <li><a>2222</a></li>
  </ul>
  <p>菜单三</p>
  <ul>
   <li><a>3333</a></li>
   <li><a>3333</a></li>
   <li><a>3333</a></li>
  </ul>
</div>

Nach dem Login kopieren

Der Plug-in-Implementierungscode lautet wie folgt:

(function ($) {
   $.fn.Fold = function (options) {
    //默认参数设置
    var settings = {
     speed: 300 //折叠速度(值越大越慢)
    }

    //不为空则合并参数
    if (options)
     $.extend(settings, options);
　　　　　　　　　
　　　　　　　　　//遵循链式原则
　　　　　　　　　return this.each(function () {

    　　//为每个p元素绑定点击事件
    　　$("> p", this).each(function () {
     　　$(this).bind("click", function () {
      　　$(this).next("ul").slideToggle(settings.speed);
     　　});
    　　});

    　　//默认第一个展开，其它折叠
    　　$("> ul", this).hide().first().show();
    
    });
   }
})(jQuery);

Nach dem Login kopieren

Ich werde es hier nicht erklären, die Notizen sind alle klar angegeben.
Die Beispiel-DEMO 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></title>
 <style type="text/css">
  *{padding:0;margin:0;}
  ul,ul li{ list-style:none;}
  .box{ width:250px; margin:50px auto; border:1px solid gray;}
  .box p{ background-color: Green;color: white;cursor: pointer;font-weight: bold;
  line-height: 40px;padding-left: 15px;}
 </style>
</head>
<body>
 <div class="box">
  <p>菜单一</p>
  <ul>
   <li><a>1111</a></li>
   <li><a>1111</a></li>
   <li><a>1111</a></li>
  </ul>
  <p>菜单二</p>
  <ul>
   <li><a>2222</a></li>
   <li><a>2222</a></li>
   <li><a>2222</a></li>
  </ul>
  <p>菜单三</p>
  <ul>
   <li><a>3333</a></li>
   <li><a>3333</a></li>
   <li><a>3333</a></li>
  </ul>
 </div>

 <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../js/jquery.similar.Fold.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(".box").Fold();
 </script>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.