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> 全部缩进。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何用Python寫出求解最小公倍數的演算法？
Sep 19, 2023 am 11:25 AM
如何用Python寫出求解最小公倍數的演算法？最小公倍數是指兩個數中能夠整除這兩個數的最小整數。在數學中，求解最小公倍數是一項基本的數學任務，而在電腦程式設計中，我們可以使用Python來寫一個求解最小公倍數的演算法。以下將介紹基本的最小公倍數演算法，並給出具體的程式碼範例。最小公倍數的數學定義是：若a能被n整除且b能被n整除，則n是a和b的最小公倍數。要求解最小
用C語言程式實現最大公約數求解
Feb 21, 2024 pm 07:30 PM
標題：以C語言程式實現最大公約數求解最大公約數（GreatestCommonDivisor，簡稱GCD）是指能夠同時整除兩個或多個整數的最大正整數。求解最大公約數對於一些演算法和問題解決非常有幫助。在本文中，將透過C語言程式設計來實現求解最大公約數的功能，並提供具體的程式碼範例。在C語言中，可以使用歐幾裡得演算法（EuclideanAlgorithm）來求解最大
快速計算矩陣逆的方法 - Numpy實現
Jan 24, 2024 am 08:47 AM
Numpy是Python中著名的科學計算庫，為處理大型多維數組和矩陣提供了豐富的功能和高效的計算方法。在資料科學和機器學習領域，矩陣的逆運算是一項常見的任務。在本文中，我將介紹使用Numpy函式庫快速求解矩陣逆的方法，並提供具體的程式碼範例。首先，讓我們透過安裝Numpy庫引入它到我們的Python環境中。可以使用以下命令在終端機中安裝Numpy：pipinsta
如何使用Python實作求解階乘的演算法？
Sep 19, 2023 am 10:30 AM
如何使用Python實作求解階乘的演算法？階乘是數學中的重要概念，指的是一個數乘上其自身減一，再乘上自身減一減一，以此類推，直到乘到1為止。階乘通常以符號"!"來表示，例如5的階乘表示為5!，計算公式為：5!=5×4×3×2×1=120。在Python中，我們可以使用迴圈來實作一個簡單的階乘演算法。下面給一個範例程式碼：deffacto
學習C語言如何求解最大公約數
Feb 21, 2024 pm 11:18 PM
學習C語言如何解最大公約數，需要具體程式碼範例最大公約數（GreatestCommonDivisor，簡稱GCD）是指兩個或多個整數中能夠整除它們的最大正整數。在電腦程式設計中常會用到最大公約數，特別是在處理分數、化簡分數以及求解最簡整數比例等問題時。本篇文章將介紹如何使用C語言來求解最大公約數，並給出具體的程式碼範例。求解最大公約數的方法有很多種，例如歐
在C/C++中寫出求解模方程式的程式？
Sep 12, 2023 pm 02:21 PM
在這裡，我們將看到一個與模方程式相關的有趣問題。假設我們有兩個值A和B。我們必須找到變數X可以取的可能值的數量，使得(AmodX)=B成立。假設A為26，B為2。所以X的首選值會是{3,4,6,8,12,24}，因此計數為6。這就是答案。讓我們看一下演算法以更好地理解。演算法possibleWayCount(a,b)−begin ifa=b,thenthereareinfinitesolutions ifa
求第n個斐波那契數的C/C++程式？
Sep 12, 2023 pm 06:01 PM
斐波那契數列是一個數列，其中下一項是前兩項之和。斐波那契數列的前兩項是0後跟1。在這個問題中，我們會發現斐波那契數列中的第n個數字。為此，我們將計算所有數字並列印n項。 Input:8Output:011235813說明0+1=11+1=21+2=32+3=5使用For迴圈將前兩項求和作為下一項範例#include<iostream>usingnamespacestd;intmain(){ intt1= 0,t2=1,n,i,nextTerm;&am
PHP中如何求解2的乘方？
Mar 28, 2024 am 11:09 AM
標題：PHP中如何求解2的乘方？具體程式碼範例分享在PHP程式設計中，求解數的乘方是一個常見的需求，特別是在一些演算法和數學計算中。本文將詳細探討如何在PHP中求解2的乘方，並提供具體的程式碼範例供大家參考。在PHP中，可以使用冪運算子**來計算乘方。對於2的乘方，即計算$2^n$，其中$n$是乘方的指數。下面我們將透過幾種不同的方法來實現這個計算。方法一：使用**運
