Maison > interface Web > js tutoriel > le corps du texte

jQuery implémente le code d'effet du menu latéral en accordéon

零下一度
Libérer: 2017-04-19 15:57:45
original
1140 Les gens l'ont consulté

Cet article présente principalement l'effet de menu latéral accordéon implémenté par jQuery, impliquant des techniques d'implémentation liées à la réponse aux événements jQuery et au fonctionnement dynamique des attributs d'élément. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit. l'implémentation de l'effet de menu latéral jQuery Accordion. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

J'ai créé un menu accordéon simple, comme indiqué ci-dessus :

Cliquez sur B pour réduire dans la liste C, cliquez sur C pour modifier son style et celui du nœud parent B, et les deux ont des changements de style différents lorsqu'ils sont suspendus.

Regardez d'abord le code de la page, l'imbrication des listes :


<p id="menup">
<ul id="menu">
<li class="parentLi">
<span>B</span>
<ul class="childrenUl">
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
</ul>
</li>
<li class="parentLi">
<span>B</span>
<ul class="childrenUl">
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
</ul>
</li>
<li class="parentLi">
<span>B</span>
<ul class="childrenUl">
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
</ul>
</li>
</ul>
</p>
Copier après la connexion

code css, définit principalement la couleur de fond et le style de la gauche bordure du sous-menu, et définissez la suspension Et le style sélectionné, commencez à définir le sous-menu pour qu'il ne s'affiche pas (affichage après avoir cliqué sur le paramètre js) :


#menup{
  width: 200px;
  background-color: #029FD4;
}
.parentLi
{
  width: 100%;
  line-height: 40px;
  margin-top: 1px;
  background: #1C73BA;
  color: #fff;
  cursor: pointer;
  font-weight:bolder;
}
.parentLi span
{
  padding: 10px;
}
.parentLi:hover, .selectedParentMenu
{
  background: #0033CC;
}
.childrenUl
{
  background-color: #ffffff;
  display: none;
}
.childrenLi
{
  width: 100%;
  line-height: 30px;
  font-size: .9em;
  margin-top: 1px;
  background: #63B8FF;
  color: #000000;
  padding-left: 15px;
  cursor: pointer;
}
.childrenLi:hover, .selectedChildrenMenu
{
  border-left: 5px #0033CC solid;
  background: #0099CC;
  padding-left: 15px;
}
Copier après la connexion

Le suivant step est le code de l'événement de clic :


$(".parentLi").click(function(event) {
    $(this).children(&#39;.childrenUl&#39;).slideToggle();
});
$(".childrenLi").click(function(event) {
    event.stopPropagation();
    $(".childrenLi").removeClass(&#39;selectedChildrenMenu&#39;);
    $(".parentLi").removeClass(&#39;selectedParentMenu&#39;);
    $(this).parents(".parentLi").addClass(&#39;selectedParentMenu&#39;);
    $(this).addClass(&#39;selectedChildrenMenu&#39;);
});
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal