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> 全部缩进。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1659
14
1416
52
1310
25
1258
29
1232
24
Wie schreibe ich einen Algorithmus, um das kleinste gemeinsame Vielfache in Python zu finden?
Sep 19, 2023 am 11:25 AM
Wie schreibe ich einen Algorithmus, um das kleinste gemeinsame Vielfache in Python zu finden? Das kleinste gemeinsame Vielfache ist die kleinste ganze Zahl zwischen zwei Zahlen, die die beiden Zahlen teilen kann. In der Mathematik ist das Lösen des kleinsten gemeinsamen Vielfachen eine grundlegende mathematische Aufgabe, und in der Computerprogrammierung können wir Python verwenden, um einen Algorithmus zum Lösen des kleinsten gemeinsamen Vielfachen zu schreiben. Im Folgenden wird der grundlegende Algorithmus für das kleinste gemeinsame Vielfache vorgestellt und spezifische Codebeispiele gegeben. Die mathematische Definition des kleinsten gemeinsamen Vielfachen lautet: Wenn a durch n teilbar ist und b durch n teilbar ist, dann ist n das kleinste gemeinsame Vielfache von a und b. Um das Minimum zu lösen
Verwenden der C-Sprachprogrammierung zur Lösung des größten gemeinsamen Teilers
Feb 21, 2024 pm 07:30 PM
Titel: Verwenden Sie die C-Sprachprogrammierung, um die Lösung für den größten gemeinsamen Teiler zu implementieren. Der größte gemeinsame Teiler (kurz: Greatest Common Divisor, GCD) bezieht sich auf die größte positive ganze Zahl, die zwei oder mehr ganze Zahlen gleichzeitig teilen kann. Die Lösung nach dem größten gemeinsamen Teiler kann für einige Algorithmen und die Problemlösung sehr hilfreich sein. In diesem Artikel wird die Funktion zum Ermitteln des größten gemeinsamen Teilers durch C-Sprachprogrammierung implementiert und spezifische Codebeispiele bereitgestellt. In der Sprache C können Sie den Euklidischen Algorithmus verwenden, um das Maximum zu lösen
Eine schnelle Möglichkeit, die Umkehrung einer Matrix zu berechnen – Numpy-Implementierung
Jan 24, 2024 am 08:47 AM
Numpy ist eine bekannte Python-Bibliothek für wissenschaftliches Rechnen, die umfangreiche Funktionen und effiziente Rechenmethoden für die Verarbeitung großer mehrdimensionaler Arrays und Matrizen bietet. In der Welt der Datenwissenschaft und des maschinellen Lernens ist die Matrixinversion eine häufige Aufgabe. In diesem Artikel werde ich vorstellen, wie man die Matrixinverse mithilfe der Numpy-Bibliothek schnell löst, und spezifische Codebeispiele bereitstellen. Lassen Sie uns zunächst die Numpy-Bibliothek durch Installation in unsere Python-Umgebung einführen. Numpy kann mit dem folgenden Befehl im Terminal installiert werden: pipinsta
Wie implementiert man mit Python den Algorithmus zur faktoriellen Lösung?
Sep 19, 2023 am 10:30 AM
Wie implementiert man mit Python den Algorithmus zur faktoriellen Lösung? Fakultät ist ein wichtiges Konzept in der Mathematik. Es bedeutet, dass eine Zahl mit sich selbst minus eins multipliziert wird, dann mit sich selbst minus eins multipliziert wird und so weiter, bis sie 1 ergibt. Die Fakultät wird normalerweise durch das Symbol „!“ dargestellt. Die Fakultät von 5 wird beispielsweise als 5! ausgedrückt und die Berechnungsformel lautet: 5!=5×4×3×2×1=120. In Python können wir Schleifen verwenden, um einen einfachen faktoriellen Algorithmus zu implementieren. Nachfolgend finden Sie einen Beispielcode: deffacto
Erfahren Sie, wie Sie den größten gemeinsamen Teiler in der Sprache C finden
Feb 21, 2024 pm 11:18 PM
Um zu lernen, wie man den größten gemeinsamen Teiler in der C-Sprache findet, benötigen Sie spezifische Codebeispiele. Der größte gemeinsame Teiler (kurz: Greatest Common Divisor, GCD) bezieht sich auf die größte positive ganze Zahl unter zwei oder mehr ganzen Zahlen, die sie teilen kann. Der größte gemeinsame Nenner wird häufig in der Computerprogrammierung verwendet, insbesondere beim Umgang mit Brüchen, der Vereinfachung von Brüchen und der Lösung von Problemen wie dem einfachsten Verhältnis ganzer Zahlen. In diesem Artikel wird erläutert, wie Sie mithilfe der C-Sprache den größten gemeinsamen Teiler ermitteln, und es werden spezifische Codebeispiele aufgeführt. Es gibt viele Möglichkeiten, den größten gemeinsamen Teiler zu lösen, beispielsweise den Euklidischen
Ein Programm zum Lösen modularer Gleichungen in C/C++ schreiben?
Sep 12, 2023 pm 02:21 PM
Hier sehen wir ein interessantes Problem im Zusammenhang mit modularen Gleichungen. Nehmen wir an, wir haben zwei Werte A und B. Wir müssen die Anzahl der möglichen Werte ermitteln, die die Variable X annehmen kann, sodass (AmodX)=B gilt. Angenommen, A ist 26 und B ist 2. Der bevorzugte Wert von X wäre also {3,4,6,8,12,24}, daher die Zählung 6. Das ist die Antwort. Werfen wir einen Blick auf den Algorithmus, um ihn besser zu verstehen. Algorithmus möglichWayCount(a,b)−begin ifa=b,thenthereinfinitesolutions ifa
C/C++-Programm zum Ermitteln der n-ten Fibonacci-Zahl?
Sep 12, 2023 pm 06:01 PM
Die Fibonacci-Folge ist eine Zahlenfolge, bei der der nächste Term die Summe der beiden vorherigen Terme ist. Die ersten beiden Terme der Fibonacci-Folge sind 0, gefolgt von 1. In diesem Problem werden wir die n-te Zahl in der Fibonacci-Folge finden. Dazu zählen wir alle Zahlen und geben n Elemente aus. Eingabe:8Ausgabe:011235813 Beschreibung 0+1=11+1=21+2=32+3=5 Verwenden Sie eine For-Schleife, um die ersten beiden Elemente als nächstes Element zu summieren. Beispiel #include<iostream>usingnamespacestd;intmain(){ intt1 = 0,t2=1,n,i,nextTerm;&am
Wie löst man in PHP nach Zweierpotenzen?
Mar 28, 2024 am 11:09 AM
Titel: Wie löst man in PHP nach Zweierpotenzen? Spezifische Codebeispiele werden in der PHP-Programmierung geteilt. Das Lösen der Potenz von Zahlen ist eine häufige Anforderung, insbesondere bei einigen Algorithmen und mathematischen Berechnungen. In diesem Artikel wird ausführlich erläutert, wie die Zweierpotenz in PHP gelöst werden kann, und es werden spezifische Codebeispiele als Referenz bereitgestellt. In PHP können Sie den Potenzierungsoperator ** verwenden, um Potenzen zu berechnen. Berechnen Sie für Zweierpotenzen $2^n$, wobei $n$ der Exponent der Potenz ist. Im Folgenden werden wir diese Berechnung auf verschiedene Arten umsetzen. Methode 1: Nutzen Sie **Glück
