suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert die Dropdown-Menünavigation

jQuery implementiert die Dropdown-Menünavigation

php中世界最好的语言
php中世界最好的语言Original
2018-03-15 16:02:372673Durchsuche

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>

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!

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：vue.js ruft die aktuelle Click-Object-Methodeninstanz abNächster Artikel：vue.js ruft die aktuelle Click-Object-Methodeninstanz ab

In Verbindung stehende Artikel

Mehr sehen