suchen

Heim >Web-Frontend >js-Tutorial >Javascript implementiert kontrollierte mehrstufige Dropdown-Menü_Javascript-Fähigkeiten

Javascript implementiert kontrollierte mehrstufige Dropdown-Menü_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:171118Durchsuche

Mir ging es in letzter Zeit nicht gut, daher konnte ich leider nicht wie geplant aktualisieren. Fügen Sie den Code direkt hier ein. Wenn Sie etwas nicht verstehen, hinterlassen Sie einfach eine Nachricht. 

<!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>
    <title>下拉菜单</title>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
      .navi ul {
        padding: 0;
        list-style-type: none;
      }
      .navi ul li {
        text-align: center;
        float: left;
        position: relative;
        width: 200px;
        background-color: #0F8CFF;
      }
      a {
        color: #086808;
        text-decoration: none;
      }
      .navi ul li a {
        display: block;
        border: 1px solid #fff;
      }
      .navi ul li ul {
        display: none;
        left: 0;
      }
      .navi ul li ul li ul{
        position: absolute;
        left:200px;
        top: 0;
      }
      .navi ul li:hover ul a {
        color: yellow;
      }
    </style>
 
    <script type="text/javascript">
      function showNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "block";
      }
      function hideNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "none";
      }
    </script>
  </head>
 
  <body>
 
    <div class="navi">
      <ul >
        <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
              <a href="javascript:;" >传奇</a>
 
              <ul>
                <li>
                  <a href="javascript:;" >1</a>
                </li>
                <li>
                  <a href="javascript:;" >2</a>
                </li>
                <li>
                  <a href="javascript:;" >3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
 
  </body>
 
</html>

Die Darstellung ist wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein einfaches Beispiel für die Verwendung von DNode zur Implementierung der Kommunikation zwischen PHP und nodejs_node.jsNächster Artikel：Ein einfaches Beispiel für die Verwendung von DNode zur Implementierung der Kommunikation zwischen PHP und nodejs_node.js

In Verbindung stehende Artikel

Mehr sehen