jquery实现动态菜单的实例代码_jquery
May 16, 2016 pm 05:12 PMjquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式。
其具体步骤可以分为以下几步:
•创建一个含有要表达的菜单的html页面
•创建一个css文件来控制菜单的显示
/*让所有的li都不显示小圆点,可以使用css标签选择器*/
li{
/*使list前的小圆点消失*/
list-style: none;
/*缩进效果*/
margin-left: 18px;
/*隐藏菜单*/
display: none;
}
a{
/*文字的显示方式*/
text-decoration: none;
}
•创建一个JavaScript文件来控制菜单的显示
/*
* 点击主菜单,子菜单显示;再次点击主菜单,子菜单隐藏
* 需要编写代码,使得主菜单在装载时添加onclick事件,使得点击主菜单可以显示子菜单
* 注册页面装载时执行的方法
*/
$(document).ready(function(){
//var uls = $("ul");
//找到ul下的a节点
var as = $("ul > a");
as.click(function(){
//首先找到当前ul中的li,然后让li显示出来
//获取当前被点击的ul节点
var aNode = $(this);
//找到被点击ul节点下的所有li节点
var lis = aNode.nextAll("li");
//显示或隐藏ul的li子节点们
lis.toggle("slow");
});
});

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Analyse approfondie : les avantages et les inconvénients de jQuery

Comprendre le rôle et les scénarios d'application de eq dans jQuery

Comment savoir si un élément jQuery possède un attribut spécifique ?
