suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte für Jquery-Akkordeon-Spezialeffekte

Detaillierte Erläuterung der Schritte für Jquery-Akkordeon-Spezialeffekte

php中世界最好的语言
php中世界最好的语言Original
2018-04-24 10:55:521882Durchsuche

Dieses Mal werde ich Ihnen die Schritte von JQuery-Akkordeon-Spezialeffekten und die Vorsichtsmaßnahmen für die Implementierung von JQuery-Akkordeon-Spezialeffekten ausführlich erläutern. Hier sind praktische Fälle Schauen Sie mal rein.

Der Akkordeoneffekt ist ein häufig verwendeter Effekt in Projekten. Beispiel J dieses Artikels informiert Sie über den einfachen Akkordeon-Spezialeffektcode, der von jquery implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

CSS-Stil

/* CSS Document */
body {
  margin: 0 auto;
  padding: 0 auto;
  font-size: 9pt;
  font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
}
.accordion {
  padding-left: 0px;
}
.accordion li {
  border-top: 1px solid #000;
  list-style-type: none;
}
.titlemenu {
  width: 100%;
  height: 30px;
  background-color: #F2F2F2;
  padding: 5px 0px;
  text-align: left;
  cursor: pointer;
}
.titlemenu img {
  position: relative;
  left: 20px;
  top: 5px;
}
.titlemenu span {
  display: inline-block;
  position: relative;
  left: 40px;
}
.submenu {
  text-align: left;
  width: 100%;
  padding-left: 0px;
}
.submenu li {
  list-style-type: none;
  width: 100%;
}
.submenu li img {
  position: relative;
  left: 20px;
  top: 5px;
}
.submenu li a {
  position: relative;
  left: 40px;
  top: 5px;
  text-decoration: none;
}
.submenu li span {
  display: inline-block;
  height: 30px;
  padding: 5px 0px;
}
.hover {
  background-color: #4A5B79;
}

Benutzerdefiniertes JS

(function ($) {
  piano = function () {
    _menu ='[{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"}]},{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]';
    return ep = {
      init: function (obj) {
        _menu = eval('(' + _menu + ')');
         var li ="";
        $.each(_menu, function (index, element) {
          li += '<li><p class="titlemenu"><img src=&#39; + element.img + &#39; width="16" height="16" alt=""/><span>' + element.title + '</span></p>';
          if(element.submenu!=null)
          {
            li+='<ul class="submenu">';
            $.each(element.submenu, function (ind, ele) {
              li += '<li><img src=&#39; + ele.img + &#39; width="16" height="16" alt=""/><span><a href="#">' + ele.title + '</a></span></li>';
            });
            li+='</ul>';
          }
          li+='</li>';
        });
        obj.append(li);
      }
    }
  }
  $.fn.accordion = function (options) {
    var pia = new piano();
    pia.init($(this));
    return this.each(function () {
      var accs = $(this).children('li');
       accs.each(reset);
      accs.click(onClick);
      var menu_li = $(".submenu").children("li");
      menu_li.each(function (index, element) {
        $(this).mousemove(function (e) {
          $(this).siblings().removeClass("hover");
          $(this).find("a").css("color", "#fff");
          $(this).siblings().find("a").css("color", "#000");
          $(this).addClass("hover");
        });
      });
    });
  }
  function onClick() {
    $(this).siblings('li').find("ul").each(hide);
    $(this).find("ul").slideDown('normal');
    return false;
  }
  function hide() {
    $(this).slideUp('normal');
  }
  function reset() {
    $(this).find("ul").hide();
  }
})(jQuery);

HTML-Aufrufmethode

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="accordion.js"></script>
<script type="text/javascript">      
  $(function(){
    $("#accordion").accordion();
  });
</script>
</head>
<body>
<ul id="accordion" class="accordion" style="width:200px;height:500px;">
</ul>
</body>
</html>

I Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery implementiert die Funktion zum Vergrößern von Bildern, wenn die Maus darüber fährt

jQuery implementiert das gleitende Umschalten von Bilder (mit Code)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte für Jquery-Akkordeon-Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：JQuery bewirkt, dass das Menü nach links und rechts scrolltNächster Artikel：JQuery bewirkt, dass das Menü nach links und rechts scrollt

In Verbindung stehende Artikel

Mehr sehen