js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:08 PM

js メニューのドロップダウン、なぜ一方は正常に表示されるのに、もう一方はクリックすると消えてしまいます~~
別のメニューは問題ありませんが、ページに配置すると正常ではありません。何が起こっているのでしょうか?助けてください~~
Cake ディレクトリでは正常ですが、About Us をクリックしても表示されません [img=http://hi.csdn.net/space-4200912-do-] album-picid-1082995-goto- down.html][/img]

<!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>Chinaz菜单导航</title><style type="text/css"><!--div, ul, p{    margin: 0;    padding: 0;    font-weight: normal;    font-style: normal;    font-size: 100%;    font-family: inherit;}/* Nav==========================================================*/.nav {width:990px;    position: relative; margin:0px auto;}.navinner { background-color:#000000;}.navlist {    height: 45px;    line-height: 36px;    overflow: hidden;    	}.nav li {    float: left;    display: inline;    margin: 0 0 0 -2px;}.nav a {    display: block;    width: 200px;    text-align: center;    font-size: 120%;}.nav a:link, .nav a:visited {    color: #fff;}.nav a.current, .nav a:hover, .nav a:active {    color: #fff;    font-weight: bold;}.subnav {    position: absolute;    top: 41px;    left: 0;    float: left;    height: 30px; width:990px;    line-height: 28px;    white-space: nowrap;	background-color:#1b0908;}* html .subnav {    margin: 0 10px 0 -10px; /* IE 6 and below */}.subnav p {    padding: 0 10px;}.subnav p span {    display: block;}.subnav p.pointer {    position: absolute;    top: 5px;    left: 0;    height: 5px;    width: 11px;    padding: 0;    margin-left: 20px;    text-indent: -999em;    }.subnav a {    display: inline;    padding: 0;    font-size: 100%;}[class~="subnav"] a {  }.subnav, .subnav a:link, .subnav a:visited {    color: #235e99;}.subnav a:hover, .subnav a:active {    color: #235e99;}.subnav a:hover, .subnav a:active {    font-weight: normal;    background: none;    }/* subnav position and pointer position */#subnav1 { left: auto; right: 0px; }#subnav2 { left: auto; right: 0px; }#subnav3 { left: auto; right: 0px; }#subnav4 {left: auto;  right: 0px;}#subnav5, #subnav6, #subnav7 {     left: auto;    right: 0px;}#subnav1 .pointer,#subnav2 .pointer,#subnav3 .pointer,#subnav4 .pointer { left: auto; }#subnav5 .pointer { left: auto; right: 290px; }#subnav6 .pointer { left: auto; right: 180px; }#subnav7 .pointer { left: auto; right: 70px; }#subnav1, #subnav2, #subnav3, #subnav4 {    min-width: 110px;}#subnav5 { min-width: 340px; }#subnav6 { min-width: 240px; }#subnav7 { min-width: 130px; }/* Note==========================================================*/.note {    margin: 0 15px 10px; color:#666666;}.note span{ float:right;}.disable {    display: none;}--></style><script type="text/javascript"><!--function $(id) {    return document.getElementById(id);}function showMenu (baseID, divID) {    baseID = $(baseID);    divID  = $(divID);    if (showMenu.timer) clearTimeout(showMenu.timer); hideCur();    divID.style.display = 'block'; showMenu.cur = divID;    if (! divID.isCreate) {        divID.isCreate = true;        //divID.timer = 0;        divID.onmouseover = function () {            if (showMenu.timer) clearTimeout(showMenu.timer);   hideCur();            divID.style.display = 'block';        };        function hide () {            showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);        }        divID.onmouseout = hide;        baseID.onmouseout = hide;    } function hideCur () {  showMenu.cur && (showMenu.cur.style.display = 'none'); }}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body ><div onload="MM_preloadImages('images/1_.gif','images/2_.gif','images/_1_ .gif','images/3_.gif','images/4_.gif','images/5_.gif','images/6_.gif','images/_2_ .gif','images/_3_ .gif','images/_4_ .gif','images/_01_.gif','images/_02_.gif','images/_03_.gif','images/_04_.gif')"><div class="nav"><div class="navinner">  <ul class="navlist">  <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/1_.gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/1.gif"  class="lazy"   name="Image1"  border="0" id="Image1" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a></li>  <li><a href="product.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/2_.gif',1)" onClick="showMenu('Image2','subnav1')"><img  src="/static/imghwm/default1.png"  data-src="images/2.gif"  class="lazy"   name="Image2"  border="0" id="Image2" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a>    <div class="subnav disable" id="subnav1">      <p class="pointer">.</p>      <p><span>      <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/_1_ .gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_1.gif"  class="lazy"   name="Image7"    style="max-width:90%"  style="max-width:90%" border="0" id="Image7" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/_2_ .gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_2.gif"  class="lazy"   name="Image8"    style="max-width:90%"  style="max-width:90%" border="0" id="Image8" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>       <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/_3_ .gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_3.gif"  class="lazy"   name="Image9"    style="max-width:90%"  style="max-width:90%" border="0" id="Image9" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/_4_ .gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_4.gif"  class="lazy"   name="Image10"    style="max-width:90%"  style="max-width:90%" border="0" id="Image10" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>      </span></p>    </div>    </li>   <li><a href="activity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/3_.gif',1)" onClick="showMenu('Image3','subnav2')"><img  src="/static/imghwm/default1.png"  data-src="images/3.gif"  class="lazy"   name="Image3" border="0" id="Image3" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a>    </li>   <li><a href="jifen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/4_.gif',1)" onClick="showMenu('Image4','subnav3')"><img  src="/static/imghwm/default1.png"  data-src="images/4.gif"  class="lazy"   name="Image4"  border="0" id="Image4" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a>      </li>  <li><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/5_.gif',1)" onClick="showMenu('Image5','subnav4')"><img  src="/static/imghwm/default1.png"  data-src="images/5.gif"  class="lazy"   name="Image5"  border="0" id="Image5" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a>    <div class="subnav disable" id="subnav4">      <p class="pointer">.</p>      <p><span>      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/_01_.gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_01.gif"  class="lazy"   name="Image11"    style="max-width:90%"  style="max-width:90%" border="0" id="Image11" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>       <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/_02_.gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_02.gif"  class="lazy"   name="Image12"    style="max-width:90%"  style="max-width:90%" border="0" id="Image12" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>       <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/_03_.gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_03.gif"  class="lazy"   name="Image13"    style="max-width:90%"  style="max-width:90%" border="0" id="Image13" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>       <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/_04_.gif',1)"><img  src="/static/imghwm/default1.png"  data-src="images/_04.gif"  class="lazy"   name="Image14"    style="max-width:90%"  style="max-width:90%" border="0" id="Image14" / alt="js メニューのドロップダウン、片方は正常に表示されるのに、もう片方をクリックすると消えてしまうのはなぜですか_html/css_WEB-ITnose" ></a><a href="#"></a>      </span></p>    </div>    </li>       </li>  </ul></div>  </div></div></div></body></html>

ディスカッション (解決策) に返信

それは、Cake ディレクトリでは通常のことですが、About Us でクリックするだけです。そしてそれはどこにいますか。。

私の IE8 と Firefox は応答がありません

参考までに、私のリソースに純粋な CSS + div ポップアップメニューを用意しました。

イベントのバブリングと関係があるのでしょうか？オンラインにアクセスして、JS でイベントのバブリングを防止する方法を確認してください。ポップアップボックスに表示されたコードの後に、イベントのバブリングを防止するコードを追加するだけで問題ありません。

イベントのバブリングはブラウザに関連しています。具体的な記述方法は、以前職場で同じような状況に遭遇したことがあります。。お役に立てれば。

あなたが書いた HTML を見ると、ポップアップと非表示が Dreamweaver で直接操作されているように思えました。そこに div+css+jquery を学習してください。現在、画像を切り替える方法はたくさんありますが、それらはすべて CSS スプライト (全体像にいくつかの些細な画像を組み込む) を使用して、背景の切り替え、ナビゲーションのポップアップ、および非表示を実現するために jQuery を使用する方法です

。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles