Jquery樹(shù)形菜單默認(rèn)全部展開(kāi)了，需要縮起，求解_html/css_WEB-ITnose
Jun 24, 2016 am 11:52 AM
個(gè)人網(wǎng)上下了一段Jquery樹(shù)形菜單代碼，默認(rèn)打開(kāi)頁(yè)面是全部展開(kāi)的，需要全部縮起來(lái)，只顯示第一級(jí)，求解修改哪里？
<!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><!--圖標(biāo)樣式--><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>
回復(fù)討論(解決方案)
沒(méi)有人幫我嘛。。
.addClass('icon-plus-sign').removeClass('icon-minus-sign');
這是 增加樣式與去除樣式。jq里用show()與hide()來(lái)顯示與隱藏
<!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> <!--圖標(biāo)樣式--><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()來(lái)顯示與隱藏
我給你CSS 你看看 那都是替換展開(kāi)收縮的加減圖標(biāo)用的，icon的css都是圖標(biāo)。
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??非常感謝！?我要去學(xué)習(xí)一下這里的live?和?on?作用??，<script>$('ul li ul li').hide()</script>?全部縮進(jìn)。
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線(xiàn)上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門(mén)話(huà)題
如何用Python寫(xiě)出求解最小公倍數(shù)的演算法？
Sep 19, 2023 am 11:25 AM
如何用Python寫(xiě)出求解最小公倍數(shù)的演算法？最小公倍數(shù)是指兩個(gè)數(shù)中能夠整除這兩個(gè)數(shù)的最小整數(shù)。在數(shù)學(xué)中，求解最小公倍數(shù)是一項(xiàng)基本的數(shù)學(xué)任務(wù)，而在電腦程式設(shè)計(jì)中，我們可以使用Python來(lái)寫(xiě)一個(gè)求解最小公倍數(shù)的演算法。以下將介紹基本的最小公倍數(shù)演算法，並給出具體的程式碼範(fàn)例。最小公倍數(shù)的數(shù)學(xué)定義是：若a能被n整除且b能被n整除，則n是a和b的最小公倍數(shù)。要求解最小
用C語(yǔ)言程式實(shí)現(xiàn)最大公約數(shù)求解
Feb 21, 2024 pm 07:30 PM
標(biāo)題：以C語(yǔ)言程式實(shí)現(xiàn)最大公約數(shù)求解最大公約數(shù)（GreatestCommonDivisor，簡(jiǎn)稱(chēng)GCD）是指能夠同時(shí)整除兩個(gè)或多個(gè)整數(shù)的最大正整數(shù)。求解最大公約數(shù)對(duì)於一些演算法和問(wèn)題解決非常有幫助。在本文中，將透過(guò)C語(yǔ)言程式設(shè)計(jì)來(lái)實(shí)現(xiàn)求解最大公約數(shù)的功能，並提供具體的程式碼範(fàn)例。在C語(yǔ)言中，可以使用歐幾裡得演算法（EuclideanAlgorithm）來(lái)求解最大
快速計(jì)算矩陣逆的方法 - Numpy實(shí)現(xiàn)
Jan 24, 2024 am 08:47 AM
Numpy是Python中著名的科學(xué)計(jì)算庫(kù)，為處理大型多維數(shù)組和矩陣提供了豐富的功能和高效的計(jì)算方法。在資料科學(xué)和機(jī)器學(xué)習(xí)領(lǐng)域，矩陣的逆運(yùn)算是一項(xiàng)常見(jiàn)的任務(wù)。在本文中，我將介紹使用Numpy函式庫(kù)快速求解矩陣逆的方法，並提供具體的程式碼範(fàn)例。首先，讓我們透過(guò)安裝Numpy庫(kù)引入它到我們的Python環(huán)境中?？梢允褂靡韵旅钤诮K端機(jī)中安裝Numpy：pipinsta
如何使用Python實(shí)作求解階乘的演算法？
Sep 19, 2023 am 10:30 AM
如何使用Python實(shí)作求解階乘的演算法？階乘是數(shù)學(xué)中的重要概念，指的是一個(gè)數(shù)乘上其自身減一，再乘上自身減一減一，以此類(lèi)推，直到乘到1為止。階乘通常以符號(hào)"!"來(lái)表示，例如5的階乘表示為5!，計(jì)算公式為：5!=5×4×3×2×1=120。在Python中，我們可以使用迴圈來(lái)實(shí)作一個(gè)簡(jiǎn)單的階乘演算法。下面給一個(gè)範(fàn)例程式碼：deffacto
學(xué)習(xí)C語(yǔ)言如何求解最大公約數(shù)
Feb 21, 2024 pm 11:18 PM
學(xué)習(xí)C語(yǔ)言如何解最大公約數(shù)，需要具體程式碼範(fàn)例最大公約數(shù)（GreatestCommonDivisor，簡(jiǎn)稱(chēng)GCD）是指兩個(gè)或多個(gè)整數(shù)中能夠整除它們的最大正整數(shù)。在電腦程式設(shè)計(jì)中常會(huì)用到最大公約數(shù)，特別是在處理分?jǐn)?shù)、化簡(jiǎn)分?jǐn)?shù)以及求解最簡(jiǎn)整數(shù)比例等問(wèn)題時(shí)。本篇文章將介紹如何使用C語(yǔ)言來(lái)求解最大公約數(shù)，並給出具體的程式碼範(fàn)例。求解最大公約數(shù)的方法有很多種，例如歐
求第n個(gè)斐波那契數(shù)的C/C++程式？
Sep 12, 2023 pm 06:01 PM
斐波那契數(shù)列是一個(gè)數(shù)列，其中下一項(xiàng)是前兩項(xiàng)之和。斐波那契數(shù)列的前兩項(xiàng)是0後跟1。在這個(gè)問(wèn)題中，我們會(huì)發(fā)現(xiàn)斐波那契數(shù)列中的第n個(gè)數(shù)字。為此，我們將計(jì)算所有數(shù)字並列印n項(xiàng)。 Input:8Output:011235813說(shuō)明0+1=11+1=21+2=32+3=5使用For迴圈將前兩項(xiàng)求和作為下一項(xiàng)範(fàn)例#include<iostream>usingnamespacestd;intmain(){??intt1= 0,t2=1,n,i,nextTerm;&am
PHP中如何求解2的乘方？
Mar 28, 2024 am 11:09 AM
標(biāo)題：PHP中如何求解2的乘方？具體程式碼範(fàn)例分享在PHP程式設(shè)計(jì)中，求解數(shù)的乘方是一個(gè)常見(jiàn)的需求，特別是在一些演算法和數(shù)學(xué)計(jì)算中。本文將詳細(xì)探討如何在PHP中求解2的乘方，並提供具體的程式碼範(fàn)例供大家參考。在PHP中，可以使用冪運(yùn)算子**來(lái)計(jì)算乘方。對(duì)於2的乘方，即計(jì)算$2^n$，其中$n$是乘方的指數(shù)。下面我們將透過(guò)幾種不同的方法來(lái)實(shí)現(xiàn)這個(gè)計(jì)算。方法一：使用**運(yùn)
在C/C++中寫(xiě)出求解模方程式的程式？
Sep 12, 2023 pm 02:21 PM
在這裡，我們將看到一個(gè)與模方程式相關(guān)的有趣問(wèn)題。假設(shè)我們有兩個(gè)值A(chǔ)和B。我們必須找到變數(shù)X可以取的可能值的數(shù)量，使得(AmodX)=B成立。假設(shè)A為26，B為2。所以X的首選值會(huì)是{3,4,6,8,12,24}，因此計(jì)數(shù)為6。這就是答案。讓我們看一下演算法以更好地理解。演算法possibleWayCount(a,b)?begin??ifa=b,thenthereareinfinitesolutions??ifa
