ウェブフロントエンド
htmlチュートリアル
Jquery ツリー メニューはデフォルトですべて展開されているため、Solve_html/css_WEB-ITnose を折りたたむ必要があります。
Jquery ツリー メニューはデフォルトですべて展開されているため、Solve_html/css_WEB-ITnose を折りたたむ必要があります。
個人の Web サイトに 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 style=""><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 style=""><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'); これはスタイルを追加することです。そしてスタイルを削除します。 Show() と Hide() は、jq で表示と非表示を切り替えるために使用されます
rree
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}
こんにちは、ありがとうございます！ここでは live と on の関数を学習します。 <script>$('ul li ul li').hide()</script> すべてインデントされています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7450
15
1374
52
77
11
14
8
Python で最小公倍数を見つけるアルゴリズムを作成するにはどうすればよいですか?
Sep 19, 2023 am 11:25 AM
Python で最小公倍数を見つけるアルゴリズムを作成するにはどうすればよいですか?最小公倍数は、2 つの数値を割り算できる最小の整数です。数学では、最小公倍数を解くことは基本的な数学的タスクであり、コンピューター プログラミングでは、Python を使用して最小公倍数を解くアルゴリズムを作成できます。以下では、基本的な最小公倍数アルゴリズムを紹介し、具体的なコード例を示します。最小公倍数の数学的定義は次のとおりです。 a が n で割り切れ、b が n で割り切れる場合、n は a と b の最小公倍数です。最低限のことを解決するには
逆行列を計算する簡単な方法 - Numpy の実装
Jan 24, 2024 am 08:47 AM
Numpy は Python のよく知られた科学計算ライブラリであり、大規模な多次元配列と行列を処理するための豊富な関数と効率的な計算方法を提供します。データ サイエンスと機械学習の世界では、逆行列は一般的なタスクです。この記事では、Numpy ライブラリを使用して逆行列をすばやく解く方法と、具体的なコード例を紹介します。まず、Numpy ライブラリをインストールして Python 環境に導入しましょう。 Numpy は、次のコマンドを使用してターミナルにインストールできます: pipinsta
C言語プログラミングを使用して最大公約数を解く
Feb 21, 2024 pm 07:30 PM
タイトル: C 言語プログラミングを使用して最大公約数ソリューションを実装する 最大公約数 (Greatest Common Divisor、略して GCD) とは、2 つ以上の整数を同時に除算できる最大の正の整数を指します。最大公約数を解くことは、一部のアルゴリズムや問題解決に非常に役立ちます。この記事では、最大公約数を求める機能をC言語プログラミングで実装し、具体的なコード例を紹介します。 C 言語では、ユークリッド アルゴリズムを使用して最大値を解くことができます。
Python を使用して階乗を解くアルゴリズムを実装するにはどうすればよいですか?
Sep 19, 2023 am 10:30 AM
Python を使用して階乗を解くアルゴリズムを実装するにはどうすればよいですか?階乗は数学における重要な概念です。数値が 1 になるまで、数値そのものを乗算してから 1 を引いたものを乗算し、次にそれ自体を乗算してから 1 を引いた値を乗算することを意味します。階乗は通常「!」という記号で表され、例えば5の階乗は5!と表され、計算式は5!=5×4×3×2×1=120となります。 Python では、ループを使用して単純な階乗アルゴリズムを実装できます。サンプルコードを以下に示します。
C言語で最大公約数を求める方法を学びましょう
Feb 21, 2024 pm 11:18 PM
C 言語で最大公約数を見つける方法を学ぶには、具体的なコード例が必要です。最大公約数 (Greatest Common Divisor、略して GCD) は、それらを割り切れる 2 つ以上の整数のうち最大の正の整数を指します。最大公約数は、コンピューター プログラミングで、特に分数の処理、分数の簡略化、整数の最も単純な比などの問題を解くときによく使用されます。この記事では、C言語を使って最大公約数を求める方法と具体的なコード例を紹介します。ユークリッドなどの最大公約数を解く方法はたくさんあります。
C/C++ でモジュラー方程式を解くプログラムを作成しますか?
Sep 12, 2023 pm 02:21 PM
ここではモジュラー方程式に関連した興味深い問題を見てみましょう。 A と B という 2 つの値があるとします。 (AmodX)=B が成り立つような、変数 X が取り得る値の数を見つけなければなりません。 A が 26 で B が 2 だとします。したがって、X の推奨値は {3,4,6,8,12,24} となり、カウントは 6 になります。これが答えです。よりよく理解するためにアルゴリズムを見てみましょう。アルゴリズム possibleWayCount(a,b) - 開始 ifa=b、その後無限の解がある ifa
n番目のフィボナッチ数を見つけるためのC/C++プログラム?
Sep 12, 2023 pm 06:01 PM
フィボナッチ数列は、次の項が前の 2 つの項の合計である数列です。フィボナッチ数列の最初の 2 つの項は 0 で、その後に 1 が続きます。この問題では、フィボナッチ数列の n 番目の数値を求めます。これを行うには、すべての数値を数えて n 個の項目を出力します。入力:8出力:011235813 説明 0+1=11+1=21+2=32+3=5 For ループを使用して、最初の 2 つの項目を次の項目として合計します。 例 #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$ はべき乗の指数です。以下では、この計算をいくつかの異なる方法で実装します。方法 1: ** 運を利用する
