interface Web
js tutoriel
jQuery implémente l'effet de groupe de menus pliable et extensible code_jquery
jQuery implémente l'effet de groupe de menus pliable et extensible code_jquery
L'exemple de cet article décrit le code jQuery pour implémenter les effets de groupe de menus pliables et extensibles. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un magnifique groupe de menus pliants verticaux implémenté par jQuery. Veuillez actualiser la page lors de sa première exécution et laisser jQ se charger. Ce menu est largement utilisé et peut être utilisé sur le côté gauche de l'arrière-plan et sur le devant. bureau du site Web. Je l'ai trouvé sur la plateforme ouverte Tencent Weibo, partagez-le avec tout le monde pour étudier ensemble. Astuce : S'il y a des erreurs, veuillez actualiser la page.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/
Le code spécifique est le suivant :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个展开合拢的菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin:0; padding:0; }
ul,li { list-style:none; }
.catalog { width:164px; margin:0 auto;}
.t1 { height:4px; background:url(images/bg_catalog.gif) left top no-repeat; }
.t2 { background:url(images/bg_catalog.gif) -164px top repeat-y; }
.t3 { height:4px; background:url(images/bg_catalog.gif) left bottom no-repeat; }
.t2 h2 { height:81px; background:url(images/bg_catalog_logo.gif) center no-repeat; text-indent:-9999px; }
.t2 h3 { heigth:36px; line-height:36px; margin:0 1px; text-indent:26px; background:url(images/bg_catalog_icon.gif) no-repeat 13px 14px; font-size:14px; border-top:1px solid #fFF; }
.t2 ul { padding:10px 0; font-size:12px; }
.t2 li { text-indent:27px; height:30px; line-height:30px; }
.selected { display:block;}
.unselected {display:none;}
</style>
</head>
<body>
<div class="re_left">
<div class="catalog">
<div class="t1"></div>
<div class="t2">
<h2>资源</h2>
<h3><a href="javascript:void(0);" src="#">平台使用说明</a></h3>
<ul class="unselected">
<li><a href="#">平台介绍</a></li>
<li><a href="#">应用开发说明</a></li>
<li><a href="#">应用审核流程</a></li>
<li style="display:none;"><a href="#">成功案例</a></li>
<li><a href="#">开发者协议</a></li>
</ul>
<h3><a href="javascript:void(0);" src="#">API说明</a></h3>
<ul class="unselected">
<li><a href="#">API文档</a></li>
<li><a href="#">Oauth授权说明</a></li>
<li><a href="#">API调用权限</a></li>
</ul>
<h3><a href="javascript:void(0);" src="#">SDK及资源下载</a></h3>
<ul class="unselected">
<li><a href="#">SDK下载</a></li>
<li><a href="#">视觉素材下载</a></li>
</ul>
<h3><a href="javascript:void(0);" src="#">帮助中心</a></h3>
<ul class="unselected">
<li><a href="#">常见问题解答</a></li>
<li><a href="#">返回错误码说明</a></li>
</ul>
</div>
<div class="t3"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var catalogIndex=[0,0];
if (catalogIndex[0]==2){catalogIndex[0]=3;}
else if(catalogIndex[0]==3){catalogIndex[0]=2;}
if(catalogIndex.length==0){catalogIndex=[0,0];}
$(".re_left .catalog h3 a").each(function(){
$(this).attr("src",$(this).attr("href"));
});
$(".re_left .catalog").find("ul").css("border-bottom",0).end().find("h3:eq("+catalogIndex[0]+")").addClass("open").find("a").attr("href","javascript:void(0);").end().next().css("display","block").find("li:eq("+(catalogIndex[1]-1==-1?9999:catalogIndex[1]-1)+")").addClass("active");$(".re_left .catalog").find("h3").last().css("border-bottom-width","0");});
$(".re_left .catalog").find("h3").bind("click",function(){
if ($(this).hasClass("open"))
{
if ($(this).next().find(".active").size()==0)
{
$(this).next().slideUp(500,function(){
$(this).prev().removeClass("open");
});
}
else
{
$(this).next().slideUp(500,function(){
$(this).prev().removeClass("open");
//window.location.href=$(this).prev().find("a").attr("src");
});
}
}
else
{
$(this).parent().find("ul").slideUp("slow").end().find("h3").removeClass("open");
$(this).addClass("open").next().slideDown(500,function(){
if ($(this).nextAll("h3").size()>0)
{$(this).parent().find("h3").last().css("border-bottom-width","1px");}
else
{$(this).parent().find("h3").last().css("border-bottom-width","0");}
window.location.href=$(this).prev().find("a").attr("src");
});
}
return false;
});
</script>
<br><div align="center">提示：如果有错误，请刷新页面。</div>
</body>
</html>J'espère que cet article sera utile à la programmation jQuery de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
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)
Le téléphone pliable W25 de Samsung, d'une valeur de 10 000 yuans, dévoilé : une caméra frontale sous l'écran de 5 mégapixels et un corps plus fin
Aug 23, 2024 pm 12:43 PM
Selon les informations du 23 août, Samsung est sur le point de lancer un nouveau téléphone mobile pliable W25, qui devrait être dévoilé fin septembre. Il apportera des améliorations correspondantes à la caméra frontale sous l'écran et à l'épaisseur du corps. Selon certaines informations, le Samsung W25, nom de code Q6A, sera équipé d'un appareil photo sous-écran de 5 mégapixels, ce qui constitue une amélioration par rapport à l'appareil photo de 4 mégapixels de la série Galaxy Z Fold. De plus, la caméra frontale à écran externe et la caméra ultra grand angle du W25 devraient respectivement mesurer 10 millions et 12 millions de pixels. En termes de conception, le W25 a une épaisseur d'environ 10 mm à l'état plié, soit environ 2 mm de moins que le Galaxy Z Fold 6 standard. En termes d'écran, le W25 dispose d'un écran externe de 6,5 pouces et d'un écran interne de 8 pouces, tandis que le Galaxy Z Fold6 dispose d'un écran externe de 6,3 pouces et d'un écran interne de 8 pouces.
Coque de téléphone Google Pixel 9 Pro Fold exposée : écran extérieur de 6,4 pouces, écran intérieur de 8,02 pouces
Jun 25, 2024 pm 02:35 PM
Selon l'actualité du 25 juin, la source ytechb a publié hier (24 juin) un article de blog, partageant un rendu de la coque du téléphone portable Google Pixel 9 Pro Fold, montrant une fois de plus le design de l'arrière de cet écran pliable. Selon des informations précédentes, Google lancera la série de téléphones mobiles Pixel 9 en octobre de cette année. En plus des trois téléphones de la série Pixel 9, Pixel Fold sera également inclus dans la série Pixel 9 et sera officiellement nommé Pixel 9. Pliage professionnel. L'étui de téléphone exposé cette fois-ci provient du fabricant d'accessoires Torro. Les magasins en ligne de la société au Royaume-Uni et aux États-Unis ont répertorié l'étui de téléphone et divulgué la conception et la taille d'affichage du téléphone. La page présente un grand nombre de rendus de coques de téléphone Pixel 9 Pro Fold
Le modèle Samsung Galaxy Z Flip 6 révélé pour la première fois : des cadres plus étroits, des plis toujours présents
Jun 22, 2024 am 03:28 AM
Selon l'actualité du 21 juin, des médias étrangers ont récemment publié des photos de modèles du Samsung Galaxy Z Flip 6 sur Internet. D'après l'image, on peut comprendre que les bordures du Samsung Galaxy Z Flip 6 seront encore plus étroites, ce qui signifie que la largeur du téléphone peut être réduite à l'état plié, et qu'il offrira également une prise en main et une portabilité plus confortables. . De plus, par rapport à la génération précédente du ZFlip5, le modèle du Galaxy ZFlip6 est plus carré et le module caméra à l'arrière est plus proéminent. Il devrait utiliser un nouveau capteur de caméra. Cependant, vu de face, les plis du téléphone sont encore relativement évidents. Toutefois, étant donné que le modèle divulgué est un modèle de téléphone, il peut y avoir quelques différences entre celui-ci et le téléphone réel, il s'agit donc uniquement d'une référence. En termes de configuration de performances, Galaxy
Le plus gros défaut des téléphones mobiles à écran pliable : aucun scénario d'application de base
Mar 16, 2024 am 09:04 AM
Ce dont nous discutons aujourd'hui n'est pas de savoir à quoi ressemble un certain produit, mais de revenir au sujet du « écran pliable » lui-même et d'explorer la « rationalité » des téléphones mobiles à écran pliable. Tout d’abord, examinons les performances du marché des téléphones mobiles à écran pliable. Selon le dernier rapport de données d’IDC, le marché chinois des téléphones mobiles à écran pliable expédiera environ 7,007 millions d’unités en 2023, soit une augmentation de 114,5 % sur un an. Parmi eux, le marché chinois des téléphones mobiles à écran pliable a expédié environ 2,771 millions d'unités au quatrième trimestre 2023, soit une augmentation d'une année sur l'autre de 149,6 %. Les données semblent bonnes et la croissance est également très forte. Cependant, comparées aux quelque 270 millions de smartphones expédiés sur le marché chinois en 2023, ces données ne suffisent vraiment pas. En général
Voulez-vous en savoir plus sur le pliage de mots ?
Mar 19, 2024 pm 07:49 PM
Après avoir modifié le contenu du texte dans Word, vous devez afficher et vérifier le contenu modifié. S'il y a beaucoup de contenu, il n'est pas pratique de le lire. Comment résoudre ce problème ? Dans ce cas, la méthode de pliage de mots est nécessaire. Permettez-moi de partager le tutoriel de la méthode avec vous les gars ! Tout d'abord, ouvrez un document Word sur votre ordinateur, entrez le contenu requis et sélectionnez-le, puis cliquez sur l'option "Démarrer" dans la barre de menu, puis sélectionnez un style à appliquer au paragraphe de texte que vous venez de sélectionner. Vous pouvez vous référer à la partie marquée d'un cercle rouge dans l'image ci-dessous. 2. Ensuite, le paragraphe de texte sélectionné changera de style et ajoutera une petite flèche, comme indiqué dans le cercle rouge dans l'image ci-dessous : 3. Cliquez sur la petite flèche pour développer ou réduire librement le paragraphe de texte précédemment sélectionné, ou cliquez directement avec le bouton droit. , depuis
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
