1

メニューをホバーからクリックに変更しようとしましたが、メニューをクリックするとサブメニューも非常に速く閉じてしまうので、onclick と toggle に JavaScript が必要だと思いますが、その方法がわかりません。助けてください私は初心者です

/* menu */
 #menu{ margin:0px 0px; margin-top:67px; margin-left:90px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left;  height:-100px; width:1000px; }
            #menu1{ margin:0px 0px; margin-top:auto; margin-left:-50px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left;  height:auto; width:95px; }
    #menu a { color:#000; text-decoration:none; }
    #menu > li {background:#fff none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px; z-index:999 !important;}
    #menu > li a:hover {color:#B0D730;}
    #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
    /* sub-menus*/
    #menu ul { padding:0px; margin:0px; display:block; display:inline;}
    #menu li ul { position:absolute; left:-10px; top:0px; margin-top:30px; width:200px; line-height:16px; background-color:#FFF; color:#FFF; /* for IE */                       display:none; }
    #menu li:hover ul { display:block;}
    #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
    #menu li ul li:first-child { border-top: none; }
    #menu li ul li a { display:block; color:#0395CC; }
    #menu li ul li a:hover { color:#7FCDFE; }
    /* main submenu */
    #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#FFF; color:#fff; z-index:999 !important;}
4

1 に答える 1

0

クリック時

HTML コードでは、クリック時に Javascript アクションを発生させることができます。

<p onclick="clickedText()">Click Me!</p>

必要な Javascript コードは次のようになります。

var clickedText = function() {
    //Insert Code Here That's On Click
}

ID で要素にアクセスするには、次の Javascript コードを使用します。

var element = document.getElementById("id");

次に、次を使用できます。

element.style.display = "none";

スピード

を使用していて、何かがあまりにも速く閉じている場合display: none;、それはブラウザに正確に 1 秒間何も表示しないように指示しているためです。

CSS コードは、サブメニューを表示しないようにブラウザーに指示しています。

CSS コード

ここで、HTML ファイルのサンプルが役に立ちます。ブラウザに次のように伝えています。

#menu li:hover ul { /*Do stuff*/ }

つまり、 にあるホバーさul れたものをすべて選択します。li #menu

CSS Selector Referenceが大いに役立つと思います。

提案

  • HTML コードのスニペットを提供することをお勧めします。
  • これ、これ、およびこのチュートリアルを試すことをお勧めします。
  • :not()CSS セレクターを確認することをお勧めします。
于 2012-11-22T18:06:56.310 に答える