ホームページ >ウェブフロントエンド >htmlチュートリアル >このドロップダウン リスト内のすべての項目を非表示にする方法を教えてください_html/css_WEB-ITnose
このドロップダウン リスト内のすべての項目を非表示にする方法を教えてください_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:00:491087ブラウズ
<!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 を更新してください
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。