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> 全部缩进。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk menulis algoritma untuk mencari gandaan sepunya paling kurang dalam Python?
Sep 19, 2023 am 11:25 AM
Bagaimana untuk menulis algoritma untuk mencari gandaan sepunya paling kurang dalam Python? Gandaan sepunya terkecil ialah integer terkecil antara dua nombor yang boleh membahagi dua nombor. Dalam matematik, menyelesaikan gandaan sepunya terkecil ialah tugas matematik asas, dan dalam pengaturcaraan komputer, kita boleh menggunakan Python untuk menulis algoritma untuk menyelesaikan gandaan sepunya terkecil. Berikut akan memperkenalkan algoritma berbilang asas yang paling tidak sepunya dan memberikan contoh kod khusus. Takrif matematik bagi gandaan sepunya terkecil ialah: Jika a boleh dibahagi dengan n dan b boleh dibahagi dengan n, maka n ialah gandaan sepunya terkecil a dan b. Untuk menyelesaikan minimum
Cara cepat untuk mengira songsangan matriks - pelaksanaan Numpy
Jan 24, 2024 am 08:47 AM
Numpy ialah perpustakaan pengkomputeran saintifik yang terkenal dalam Python, yang menyediakan fungsi yang kaya dan kaedah pengkomputeran yang cekap untuk memproses tatasusunan dan matriks berbilang dimensi yang besar. Dalam dunia sains data dan pembelajaran mesin, penyongsangan matriks adalah tugas biasa. Dalam artikel ini, saya akan memperkenalkan cara cepat menyelesaikan songsang matriks menggunakan perpustakaan Numpy dan memberikan contoh kod khusus. Mula-mula, mari kita perkenalkan perpustakaan Numpy ke dalam persekitaran Python kita dengan memasangnya. Numpy boleh dipasang di terminal menggunakan arahan berikut: pipinsta
Menggunakan pengaturcaraan bahasa C untuk menyelesaikan pembahagi sepunya terbesar
Feb 21, 2024 pm 07:30 PM
Tajuk: Gunakan pengaturcaraan bahasa C untuk melaksanakan penyelesaian pembahagi sepunya terhebat Pembahagi sepunya terbesar (pendek kata GCD) merujuk kepada integer positif terbesar yang boleh membahagi dua atau lebih integer pada masa yang sama. Penyelesaian untuk pembahagi sepunya yang paling hebat boleh sangat membantu untuk beberapa algoritma dan penyelesaian masalah. Dalam artikel ini, fungsi mencari pembahagi sepunya terbesar akan dilaksanakan melalui pengaturcaraan bahasa C, dan contoh kod khusus akan disediakan. Dalam bahasa C, anda boleh menggunakan Algoritma Euclidean untuk menyelesaikan maksimum
Bagaimana untuk menggunakan Python untuk melaksanakan algoritma untuk menyelesaikan faktorial?
Sep 19, 2023 am 10:30 AM
Bagaimana untuk menggunakan Python untuk melaksanakan algoritma untuk menyelesaikan faktorial? Faktorial adalah konsep penting dalam matematik Ia merujuk kepada nombor yang didarab dengan sendirinya tolak satu, kemudian didarab dengan sendirinya tolak satu, dan seterusnya sehingga ia didarab kepada 1. Faktorial biasanya diwakili oleh simbol "!" Sebagai contoh, faktorial 5 dinyatakan sebagai 5!, dan formula pengiraan ialah: 5!=5×4×3×2×1=120. Dalam Python, kita boleh menggunakan gelung untuk melaksanakan algoritma faktorial mudah. Kod sampel diberikan di bawah: deffacto
Ketahui cara mencari pembahagi sepunya terbesar dalam bahasa C
Feb 21, 2024 pm 11:18 PM
Untuk mengetahui cara mencari pembahagi sepunya terbesar dalam bahasa C, anda memerlukan contoh kod khusus Pembahagi sepunya terhebat (pendek kata GCD) merujuk kepada integer positif terbesar antara dua atau lebih integer yang boleh membahagikannya. Penyebut sepunya terbesar sering digunakan dalam pengaturcaraan komputer, terutamanya apabila berurusan dengan pecahan, memudahkan pecahan, dan menyelesaikan masalah seperti nisbah integer termudah. Artikel ini akan memperkenalkan cara menggunakan bahasa C untuk mencari pembahagi sepunya yang paling hebat dan memberikan contoh kod khusus. Terdapat banyak cara untuk menyelesaikan pembahagi sepunya terbesar, seperti Euclidean
Menulis program untuk menyelesaikan persamaan modular dalam C/C++?
Sep 12, 2023 pm 02:21 PM
Di sini kita akan melihat masalah menarik berkaitan persamaan modular. Katakan kita mempunyai dua nilai A dan B. Kita mesti mencari bilangan nilai yang mungkin yang boleh diambil oleh pembolehubah X sedemikian rupa sehingga (AmodX)=B dipegang. Katakan A ialah 26 dan B ialah 2. Jadi nilai pilihan X ialah {3,4,6,8,12,24}, maka kiraan 6. Ini jawapannya. Mari kita lihat algoritma untuk memahami dengan lebih baik. Algoritma mungkinWayCount(a,b)−mulakan ifa=b,maka penyelesaian tidak terhingga jika
Bagaimana untuk menyelesaikan kuasa 2 dalam PHP?
Mar 28, 2024 am 11:09 AM
Tajuk: Bagaimana untuk menyelesaikan kuasa 2 dalam PHP? Contoh kod khusus dikongsi dalam pengaturcaraan PHP Penyelesaian kuasa nombor adalah keperluan biasa, terutamanya dalam beberapa algoritma dan pengiraan matematik. Artikel ini akan membincangkan secara terperinci cara menyelesaikan kuasa 2 dalam PHP dan memberikan contoh kod khusus untuk rujukan anda. Dalam PHP, anda boleh menggunakan operator eksponen ** untuk mengira kuasa. Untuk kuasa 2, hitung $2^n$, dengan $n$ ialah eksponen kuasa. Di bawah ini kami akan melaksanakan pengiraan ini dalam beberapa cara yang berbeza. Kaedah 1: Gunakan ** nasib
Program C/C++ untuk mencari nombor Fibonacci ke-1?
Sep 12, 2023 pm 06:01 PM
Jujukan Fibonacci ialah jujukan nombor di mana sebutan seterusnya ialah hasil tambah dua sebutan sebelumnya. Dua sebutan pertama bagi jujukan Fibonacci ialah 0 diikuti dengan 1. Dalam soalan ini, kita akan mencari nombor ke-n dalam jujukan Fibonacci. Untuk melakukan ini, kami akan mengira semua nombor dan mencetak n item. Input:8Output:011235813 Penerangan 0+1=11+1=21+2=32+3=5 Gunakan gelung For untuk menjumlahkan dua item pertama sebagai item seterusnya Contoh #include<iostream>usingnamespacestd;intmain(){ intt1 = 0,t2=1,n,i,penggal seterusnya;&am
