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