jQuery implementiert die Dropdown-Menünavigation-js-Tutorial-php.cn

jQuery implementiert die Dropdown-Menünavigation

php中世界最好的语言

Freigeben： 2018-03-15 16:02:37

Original

2478 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen jQuery zum Implementieren der Dropdown-Menü--Navigation. Was sind die Vorsichtsmaßnahmen für jQuery zum Implementieren der Dropdown-Menü-Navigation? Werfen wir einen Blick darauf.

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um eine einfache Dropdown-Menü-Navigationsfunktion zu implementieren, die die Betriebsfähigkeiten von jQuery im Zusammenhang mit dem Durchlaufen von Seitenelementen und Knotenänderungen umfasst. Freunde in Not können sich auf den folgenden Artikel beziehen erklärt die Beispiele. Verwenden Sie jQuery, um eine einfache Dropdown-Menü-Navigationsfunktion zu implementieren. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt:

Der spezifische Code lautet wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie im Artikel zur chinesischen PHP-Website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.jQuery导航</title>
    <style type="text/css">
      #menu{width:300px;margin-left:auto;margin-right:auto;}.has_children{background:#555;color:#fff;cursor:pointer;}.highlight{color:#fff;background:green;}
      p{padding:0;}
      p a{background:#888;display:none;float:left;width:300px;}
    </style>
    <!-- 引入 jQuery -->
    <script src="jquery1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
      //等待dom元素加载完毕.
    $(document).ready(function(){
        $(".has_children").click(function(){
          $(this).addClass("highlight")      //为当前元素增加highlight类
          .children("a").show().end()      //将子节点的a元素显示出来并重新定位到上次操作的元素
          .siblings().removeClass("highlight")    //获取元素的兄弟元素，并去掉他们的highlight类
          .children("a").hide();        //将兄弟元素下的a元素隐藏
          });
        });
      </script>
  </head>
  <body>
    <p id="menu">
      <p class="has_children">
        <span>第1章-认识jQuery</span>
        <a>1.1-JavaScript和JavaScript库</a>
        <a>1.2-加入jQuery</a>
        <a>1.3-编写简单jQuery代码</a>
        <a>1.4-jQuery对象和DOM对象</a>
        <a>1.5-解决jQuery和其它库的冲突</a>
        <a>1.6-jQuery开发工具和插件</a>
        <a>1.7-小结</a>
      </p>
      <p class="has_children">
        <span>第2章-jQuery选择器</span>
        <a>2.1-jQuery选择器是什么</a>
        <a>2.2-jQuery选择器的优势</a>
        <a>2.3-jQuery选择器</a>
        <a>2.4-应用jQuery改写示例</a>
        <a>2.5-选择器中的一些注意事项</a>
        <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
        <a>2.7-还有其它选择器么？</a>
        <a>2.8-小结</a>
      </p>
      <p class="has_children">
        <span>第3章-jQuery中的DOM操作</span>
        <a>3.1-DOM操作的分类</a>
        <a>3.2-jQuery中的DOM操作</a>
        <a>3.3-案例研究——某网站超链接和图片提示效果</a>
        <a>3.4-小结</a>
      </p>
    </p>
  </body>
</html>

Nach dem Login kopieren

Empfohlene Lektüre:

So verwenden Sie Webpack zum Schreiben der JQuery-Umgebungskonfiguration

Wie das Validate-Plug-in von jQuery Eingaben validiert Werte

So konvertieren Sie automatisch Groß- und Kleinbuchstaben, wenn Jackson eine JSON-Zeichenfolge analysiert

Was soll ich tun, wenn Gibt es keine Reflexion, nachdem die Ajax-Anfrage nach Hintergrunddaten erfolgreich war? Umgang mit der Verwendung von

jQuery EasyUI Accordion Panel

Das obige ist der detaillierte Inhalt vonjQuery implementiert die Dropdown-Menünavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!