このドロップダウン リスト内のすべての項目を非表示にする方法を教えてください_html/css_WEB-ITnose
<!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=GB2312" /><title>输入框提示列表效果</title><style type="text/css"><!--body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer; change:expression( this.onmouseover=function(){ this.style.background="#f5f5f5"; }, this.onmouseout=function(){ this.style.background=""; } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}--></style><script type="text/javascript"> function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case "show": Layer.style.display="block"; break; case "hide": Layer.style.display="none"; break;} } function getValue(obj,str){ var input=window.document.getElementById(obj);input.value=str; }</script></head><body><div class="form"> <div> 您属于：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div> <!--列表1--> <div class="Menu" id="List1"> <div class="Menu2"> <ul> <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li></ul> </div> </div><div>性别：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div> <!--列表2--> <div class="Menu" id="List2"> <div class="Menu2"> <ul> <li onmousedown="getValue('txt2','男');showAndHide('List2','hide');">男</li> <li onmousedown="getValue('txt2','女');showAndHide('List2','hide');">女</li></ul> </div> </div><div>学历：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div> <!--列表3--> <div class="Menu" id="List3"> <div class="Menu2"> <ul> <li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">专科</li> <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li> <li onmousedown="getValue('txt3','研究生);showAndHide('List3','hide');">研究生</li></ul> </div> </div></div></body></html>後で性別と学歴をずらすことなく、最初の項目に中国と米国のすべての項目に背景を含める方法は? CSS を閉じることを忘れないでください。そうしないと問題が発生します。また、入力ボックスにデフォルト値を設定することもできます。このように CSS にコメントするのは間違いです。
以下のようにコメントしてください。 。 。 。 。 。
<!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=GB2312" /><title>输入框提示列表效果</title><style type="text/css"><!--body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer;z-index: 1000;background-color: #79CDCD;} change:expression( this.onmouseover=function(){ this.style.background="#f5f5f5"; }, this.onmouseout=function(){ this.style.background=""; } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}--></style><script type="text/javascript"> function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case "show": Layer.style.display="block"; break; case "hide": Layer.style.display="none"; break;} } function getValue(obj,str){ var input=window.document.getElementById(obj);input.value=str; }</script></head><body><div class="form"> <div> 您属于：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div> <!--列表1--> <div class="Menu" id="List1"> <div class="Menu2"> <ul> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li></ul> </div> </div><div>性别：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div> <!--列表2--> <div class="Menu" id="List2"> <div class="Menu2"> <ul> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt2','男');showAndHide('List2','hide');">男</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt2','女');showAndHide('List2','hide');">女</li></ul> </div> </div><div>学历：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div> <!--列表3--> <div class="Menu" id="List3"> <div class="Menu2"> <ul> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">专科</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li> <li onmouseover="this.style.background='#fbf435';" onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt3','研究生);showAndHide('List3','hide');">研究生</li></ul> </div> </div></div></body></html>CSSをコメントアウトすると問題が発生するようで、liは非表示にできないので、CSSはそのままにしておいて、自分で調整した方が良いです
CSS をコメントアウトすると問題が発生し、li を非表示にすることができないため、CSS を保持して自分で調整することをお勧めします
はい。
Menu の境界線が Menu2 を覆わないという別の問題が発生しました
CSS をコメントアウトすると問題が発生するようですが、li を非表示にできないので、CSS を保持した方が良いですそして自分で調整してください
はい。
Menu の境界線が Menu2 を覆わないという別の問題が発生しました
<!--body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer;z-index: 1000;background-color: #79CDCD;} change:expression( this.onmouseover=function(){ this.style.background="#f5f5f5"; }, this.onmouseout=function(){ this.style.background=""; } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}-->これら 2 つの CSS を更新してください
ホット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）
ホットトピック
7480
15
1377
52
77
11
19
33
Google Chrome でこのタブのコンテンツが共有されているというメッセージが表示された場合はどうすればよいですか?
Mar 13, 2024 pm 05:00 PM
Google Chrome でこのタブのコンテンツが共有されているというメッセージが表示された場合はどうすればよいですか? Google Chrome を使用して新しいタブを開くと、このタブのコンテンツが共有されているというメッセージが表示されることがあります。それでは何が起こっているのでしょうか?このサイトでは、このタブのコンテンツの共有を促す Google Chrome の問題についての詳細な紹介をユーザーに提供します。 Google Chrome は、このタブのコンテンツが共有されているというメッセージを表示します。解決策: 1. Google Chrome を開きます。ブラウザの右上隅に 3 つの点が表示されます。「Google Chrome のカスタマイズと制御」アイコンをマウスでクリックして変更します。アイコン。 2. クリックすると、下にGoogle Chromeのメニューウィンドウが表示され、「その他のツール」にマウスが移動します。
Python を使用してリストから角括弧を削除する方法
Sep 05, 2023 pm 07:05 PM
Pythonは、必要に応じてさまざまな目的に使用できる非常に便利なソフトウェアです。 Python は、Web 開発、データ サイエンス、機械学習、その他自動化が必要な多くの分野で使用できます。これらのタスクの実行に役立つさまざまな機能が備わっています。 Python リストは、Python の非常に便利な機能の 1 つです。名前が示すように、リストには保存したいすべてのデータが含まれています。それは基本的に、さまざまな種類の情報のセットです。角括弧を削除するさまざまな方法 多くの場合、ユーザーはリスト項目が角括弧内に表示される状況に遭遇します。この記事では、リストを見やすくするためにこれらの括弧を削除する方法について詳しく説明します。文字列内の括弧や置換関数を削除する最も簡単な方法の 1 つは、次のとおりです。
Python の count() 関数を使用してリスト内の要素の数を数える方法
Nov 18, 2023 pm 02:53 PM
Python の count() 関数を使用してリスト内の要素の数を計算する方法には、特定のコード サンプルが必要です。Python は強力で習得しやすいプログラミング言語として、さまざまなデータ構造を処理するための組み込み関数を多数提供しています。その 1 つは count() 関数で、リスト内の要素の数をカウントするために使用できます。この記事では、count()関数の使い方と具体的なコード例を詳しく説明します。 count() 関数は Python の組み込み関数であり、特定の値を計算するために使用されます。
iPhoneのiOS 17リマインダーアプリで買い物リストを作成する方法
Sep 21, 2023 pm 06:41 PM
iOS17のiPhoneでGroceryListを作成する方法 リマインダーアプリでGroceryListを作成するのは非常に簡単です。リストを追加して項目を入力するだけです。アプリは商品を自動的にカテゴリーに分類し、パートナーやフラットパートナーと協力してストアで購入する必要のあるもののリストを作成することもできます。これを行う完全な手順は次のとおりです: ステップ 1: iCloud リマインダーをオンにする 奇妙に聞こえるかもしれませんが、Apple は、iOS17 で GroceryList を作成するには iCloud からのリマインダーを有効にする必要があると言っています。その手順は次のとおりです: iPhone の設定アプリに移動し、[あなたの名前] をタップします。次に、「i」を選択します
買い物リストの作成方法: iPhone のリマインダー アプリを使用する
Dec 01, 2023 pm 03:37 PM
iOS 17 で、Apple は食料品の買い物に出かけるときに役立つ便利な小さなリスト機能をリマインダー アプリに追加しました。この記事を読んで使い方を学び、店舗に行く時間を短縮しましょう。新しい「食料品」リスト タイプ (米国外では「ショッピング」という名前) を使用してリストを作成すると、さまざまな食品や食料品を入力し、カテゴリー別に自動的に整理できます。この構成により、食料品店や買い物中に必要なものを簡単に見つけることができます。アラートで利用できるカテゴリ タイプには、農産物、パンとシリアル、冷凍食品、スナックとキャンディー、肉、乳製品、卵とチーズ、焼き菓子、焼き菓子、家庭用品、パーソナルケアとウェルネス、ワイン、ビールと蒸留酒が含まれます。以下はiOS17で作成したものです
新しい着信音とテキスト トーンを試す: iOS 17 の iPhone で最新のサウンド アラートを体験してください
Oct 12, 2023 pm 11:41 PM
iOS 17 では、Apple は着信音とテキスト トーンの選択全体を全面的に見直し、通話、テキスト メッセージ、アラームなどに使用できる 20 以上の新しいサウンドを提供します。それらを確認する方法は次のとおりです。新しい着信音の多くは、古い着信音よりも長く、より現代的に聞こえます。アルペジオ、ブロークン、キャノピー、キャビン、チャープ、夜明け、出発、ドロップ、旅、やかん、水銀、銀河、クワッド、ラジアル、スカベンジャー、苗木、シェルター、スプリンクル、ステップ、ストーリータイム、からかう、傾ける、展開する、谷が含まれます。 。リフレクションは引き続きデフォルトの着信音オプションです。また、テキスト メッセージの受信、ボイスメール、メールの受信アラート、リマインダー アラートなどに使用できる 10 種類以上の新しいテキスト トーンも用意されています。新しい着信音やテキスト トーンにアクセスするには、まず iPhone が
Javaリストにnull値を挿入できますか?
Aug 20, 2023 pm 07:01 PM
解決策はい、add() メソッドを使用して簡単に null 値をリストに挿入できます。List 実装の場合、null はサポートされていないため、NullPointerException がスローされます。Syntaxbooleanadd(Ee) 指定された要素をこのリストの末尾に追加します。型パラメーター E -要素の実行時の型。パラメータ e −このリストに追加される要素
PythonのリストのDelとremove()の違いは何ですか?
Sep 12, 2023 pm 04:25 PM
違いについて説明する前に、まず Python リストの Del と Remove() が何であるかを理解しましょう。 Python リストの Del キーワード Python の del キーワードは、リストから 1 つ以上の要素を削除するために使用されます。すべての要素を削除する、つまりリスト全体を削除することもできます。 del キーワードを使用して Python リストから要素を削除する例 #CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="
