Jquery树形菜单默认全部展开了，需要缩起，求解_html/css_WEB-ITnose
个人网上下了一段Jquery树形菜单代码，默认打开页面是全部展开的，需要全部缩起来，只显示第一级，求解修改哪里？
<!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><!--图标样式--><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><!--主要样式--><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){ $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').on('click', function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); });});</script></head><body><div class="tree well"><ul> <li> <span><i class="icon-minus-sign"></i> Parent2</span> <a style="display:none" href="#">Test</a> <ul> <li> <span ><i class="icon-globe"></i> Child</span> <a style="display:none" href="#">Test</a> </li> <li> <span><i class="icon-globe"></i> Child</span> <a style="display:none" href="#">Test</a> </li> </ul> </li> <li> <span><i class="icon-minus-sign"></i> Parent2</span> <a style="display:none" href="#">Test</a> <ul> <li> <span><i class="icon-globe"></i> Child</span> <a style="display:none" href="#">Test</a> </li> </ul> </li> <li> <span><i class="icon-globe"></i> Parent2</span> </li></ul></div></body></html>
回复讨论(解决方案)
没有人帮我嘛。。
.addClass('icon-plus-sign').removeClass('icon-minus-sign');
这是 增加样式与去除样式。jq里用show()与hide()来显示与隐藏
<!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> <!--图标样式--><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <!--主要样式--><link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){ $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').live('click', function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); });}); </script> </head><body> <div class="tree well"><ul> <li> <span><i class="icon-minus-sign"></i> Parent2</span> <a style="display:none" href="#">Test</a> <ul> <li> <span ><i class="icon-globe"></i> Child</span> <a style="display:none" href="#">Test</a> </li> <li> <span><i class="icon-globe"></i> Child</span> <a style="display:none" href="#">Test</a> </li> </ul> </li> <li> <span><i class="icon-minus-sign"></i> Parent2</span> <a style="display:none" href="#">Test</a> <ul> <li> <span><i class="icon-globe"></i> Child</span> <a style="display:none" href="#">Test</a> </li> </ul> </li> <li> <span><i class="icon-globe"></i> Parent2</span> </li></ul></div> <script>$('ul li ul:not(:first) li').hide()</script></body></html>
.addClass('icon-plus-sign').removeClass('icon-minus-sign');
这是 增加样式与去除样式。jq里用show()与hide()来显示与隐藏
我给你CSS 你看看 那都是替换展开收缩的加减图标用的，icon的css都是图标。
a:link { color: #000000; text-decoration: none;}a:visited { color: #000000; text-decoration: none;}a:hover { color:#999999; text-decoration: underline;}a:active { color: #000000; text-decoration: none;}.tree { min-height:20px; padding:19px; margin-bottom:20px; background-color:#fbfbfb; border:1px solid #999; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)}.tree li { list-style-type:none; margin:0; padding:10px 5px 0 5px; position:relative}.tree li::before, .tree li::after { content:''; left:-20px; position:absolute; right:auto}.tree li::before { border-left:1px solid #999; bottom:50px; height:100%; top:0; width:1px}.tree li::after { border-top:1px solid #999; height:20px; top:25px; width:25px}.tree li span { -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #999999; border-radius:5px; display:inline-block; padding:3px 8px; text-decoration:none}.tree li.parent_li>span { cursor:pointer}.tree>ul>li::before, .tree>ul>li::after { border:0}.tree li:last-child::before { height:30px}.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span { background:#eee; border:1px solid #94a0b4; color:#000}
$(function(){ $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').live('click', function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); });}); <script>$('ul li ul:not(:first) li').hide()</script>Hi 非常感谢！ 我要去学习一下这里的live 和 on 作用 ，<script>$('ul li ul li').hide()</script> 全部缩进。
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)
Comment écrire un algorithme pour trouver le plus petit commun multiple en Python ?
Sep 19, 2023 am 11:25 AM
Comment écrire un algorithme pour trouver le plus petit commun multiple en Python ? Le plus petit commun multiple est le plus petit entier entre deux nombres pouvant diviser les deux nombres. En mathématiques, la résolution du plus petit commun multiple est une tâche mathématique de base, et en programmation informatique, nous pouvons utiliser Python pour écrire un algorithme permettant de résoudre le plus petit commun multiple. Ce qui suit présentera l’algorithme multiple de base le moins courant et donnera des exemples de code spécifiques. La définition mathématique du plus petit commun multiple est la suivante : si a est divisible par n et b est divisible par n, alors n est le plus petit commun multiple de a et b. Pour résoudre le minimum
Un moyen rapide de calculer l'inverse d'une matrice - Implémentation Numpy
Jan 24, 2024 am 08:47 AM
Numpy est une bibliothèque informatique scientifique bien connue en Python, qui fournit des fonctions riches et des méthodes informatiques efficaces pour traiter de grands tableaux et matrices multidimensionnels. Dans le monde de la science des données et de l’apprentissage automatique, l’inversion matricielle est une tâche courante. Dans cet article, je vais présenter comment résoudre rapidement l'inverse de la matrice à l'aide de la bibliothèque Numpy et fournir des exemples de code spécifiques. Tout d'abord, introduisons la bibliothèque Numpy dans notre environnement Python en l'installant. Numpy peut être installé dans le terminal à l'aide de la commande suivante : pipinsta
Utiliser la programmation en langage C pour résoudre le plus grand diviseur commun
Feb 21, 2024 pm 07:30 PM
Titre : Utilisez la programmation en langage C pour implémenter la solution du plus grand diviseur commun. Le plus grand diviseur commun (Greatest Common Divisor, GCD en abrégé) fait référence au plus grand entier positif qui peut diviser deux entiers ou plus en même temps. La recherche du plus grand diviseur commun peut être très utile pour certains algorithmes et la résolution de problèmes. Dans cet article, la fonction de recherche du plus grand diviseur commun sera implémentée via la programmation en langage C, et des exemples de code spécifiques seront fournis. En langage C, vous pouvez utiliser l'algorithme euclidien pour résoudre le maximum
Comment utiliser Python pour implémenter l'algorithme de résolution factorielle ?
Sep 19, 2023 am 10:30 AM
Comment utiliser Python pour implémenter l'algorithme de résolution factorielle ? Factorielle est un concept important en mathématiques. Elle fait référence à un nombre multiplié par lui-même moins un, puis multiplié par lui-même moins un, et ainsi de suite jusqu'à ce qu'il soit multiplié par 1. La factorielle est généralement représentée par le symbole "!". Par exemple, la factorielle de 5 est exprimée par 5!, et la formule de calcul est : 5!=5×4×3×2×1=120. En Python, nous pouvons utiliser des boucles pour implémenter un algorithme factoriel simple. Un exemple de code est donné ci-dessous : deffacto
Apprenez à trouver le plus grand diviseur commun en langage C
Feb 21, 2024 pm 11:18 PM
Pour savoir comment trouver le plus grand diviseur commun en langage C, vous avez besoin d'exemples de code spécifiques. Le plus grand diviseur commun (Greatest Common Divisor, GCD en abrégé) fait référence au plus grand entier positif parmi deux ou plusieurs entiers pouvant les diviser. Le plus grand dénominateur commun est souvent utilisé en programmation informatique, en particulier lorsqu'il s'agit de traiter des fractions, de simplifier des fractions et de résoudre des problèmes tels que le rapport le plus simple d'entiers. Cet article explique comment utiliser le langage C pour trouver le plus grand diviseur commun et donne des exemples de code spécifiques. Il existe de nombreuses façons de résoudre le plus grand diviseur commun, comme Euclidien
Écrire un programme pour résoudre des équations modulaires en C/C++ ?
Sep 12, 2023 pm 02:21 PM
Ici, nous verrons un problème intéressant lié aux équations modulaires. Disons que nous avons deux valeurs A et B. Il faut trouver le nombre de valeurs possibles que la variable X peut prendre telles que (AmodX)=B soit vraie. Supposons que A vaut 26 et B vaut 2. La valeur préférée de X serait donc {3,4,6,8,12,24}, d'où le nombre de 6. C'est la réponse. Jetons un coup d'œil à l'algorithme pour mieux comprendre. Algorithme possibleWayCount(a,b)−begin sia=b, alors il y a des solutions infinies sia
Comment résoudre des puissances de 2 en PHP ?
Mar 28, 2024 am 11:09 AM
Titre : Comment résoudre des puissances de 2 en PHP ? Des exemples de code spécifiques sont partagés dans la programmation PHP. Résoudre la puissance des nombres est une exigence courante, en particulier dans certains algorithmes et calculs mathématiques. Cet article expliquera en détail comment résoudre la puissance de 2 en PHP et fournira des exemples de code spécifiques pour votre référence. En PHP, vous pouvez utiliser l'opérateur d'exponentiation ** pour calculer les puissances. Pour des puissances de 2, calculez $2^n$, où $n$ est l'exposant de la puissance. Ci-dessous, nous mettrons en œuvre ce calcul de différentes manières. Méthode 1 : Utilisez ** chance
Programme C/C++ pour trouver le nième nombre de Fibonacci ?
Sep 12, 2023 pm 06:01 PM
La suite de Fibonacci est une suite de nombres dont le terme suivant est la somme des deux termes précédents. Les deux premiers termes de la suite de Fibonacci sont 0 suivi de 1. Dans ce problème, nous trouverons le nième nombre de la séquence de Fibonacci. Pour ce faire, nous allons compter tous les nombres et imprimer n éléments. Entrée : 8 Sortie : 011235813 Description 0+1=11+1=21+2=32+3=5 Utilisez une boucle For pour additionner les deux premiers éléments comme élément suivant Exemple #include<iostream>usingnamespacestd;intmain(){ intt1 = 0,t2=1,n,i,termesuivant;&am
