Implementierung des mehrstufigen Akkordeonmenüs von jQuery

In diesem Artikel wird hauptsächlich die Implementierung eines mehrstufigen Akkordeonmenüs vorgestellt. Freunde, die es benötigen, können darauf zurückgreifen.

Das Akkordeonmenü wird im Allgemeinen für die Dropdown-Navigation verwendet Das Aussehen ist sehr einfach, es ist einfach zu verwenden, da es sich dehnen und schrumpfen lässt. Die richtige Anwendung des Akkordeoneffekts im Projekt bringt dem Benutzer ein sehr gutes Erlebnis. In diesem Artikel wird das jQuery-Plug-in verwendet, um auf einfache Weise ein sehr gutes Akkordeoneffektmenü zu erstellen.

HTML
Erste Referenz jQuery und das Plug-in zwischen den Köpfen.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/accordion.js"></script>

Als nächstes schreiben Sie den Menütextcode zwischen den Textkörpern. Der HTML-Code besteht aus einer Reihe ungeordneter Listen.

<ul class="nav"> 
  <li><a href="//www.jb51.net">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">文章</a></a> 
    <ul> 
      <li><a href="#" target="_blank">XHTML/CSS</a></li> 
      <li><a href="#">Javascript/Ajax/jQuery</a> 
        <ul> 
          <li><a href="#">Cookies</a></li> 
          <li><a href="#">Event</a></li> 
          <li><a href="#">Games</a></li> 
          <li><a href="#">Images</a></li> 
        </ul> 
      </li> 
      <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
      <li><a href="#" target="_blank">前端观察</a></li> 
      <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
    </ul> 
  </li> 
  <li><a href="#">关于</a></li> 
</ul>

CSS
Natürlich müssen wir Stile zu dieser ungeordneten Liste hinzufügen, um sie sehr prägnant darzustellen auf dem Bildschirm.

.nav {width: 213px; padding: 40px 28px 25px 0;} 
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;} 
ul.nav li {} 
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;  color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;} 
ul.nav ul li { margin: 0; padding: 0; clear: both;} 
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;} 
ul.nav ul ul li a {color:silver; padding-left: 40px;} 
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;} 
ul.nav span{float:right;}

jQuery
Rufen Sie das Akkordeon-Plug-in auf, legen Sie die relevanten Eigenschaften fest und schon entsteht ein wunderschöner Akkordeon-Effekt vollendet.

$(function(){ 
  $(".nav").accordion({ 
    speed: 500, 
    closedSign: '[+]', 
    openedSign: '[-]' 
  }); 
});

Accordion bietet die folgenden Optionseinstellungen:
Geschwindigkeit: digitale Millisekunden, legen Sie die Zeit fest, zu der das Menü erweitert und geschlossen wird.
closedSign: Wenn das untergeordnete Menü geschlossen ist, kann der neben dem Menü angezeigte Inhalt ein beliebiger HTML- oder Textinhalt sein.
openedSign: Wenn das untergeordnete Menü erweitert wird, kann der neben dem Menü angezeigte Inhalt ein beliebiger HTML- oder Textinhalt sein.
Beachten Sie: Wenn Sie möchten, dass das Menü beim ersten Laden erweitert wird, können Sie class="active" zum entsprechenden zu erweiternden LI hinzufügen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JS-Code zur Implementierung eines silbergrauen vertikalen Faltmenüs mit einem dreidimensionalen 3D-Gefühl

jquery-Operationen für elementinhärente Attribute: prop() und removeProp()

Das obige ist der detaillierte Inhalt vonImplementierung des mehrstufigen Akkordeonmenüs von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!