jQuery implémente la navigation dans le menu déroulant-js tutoriel-php.cn

jQuery implémente la navigation dans le menu déroulant

php中世界最好的语言

Libérer： 2018-03-15 16:02:37

original

2664 Les gens l'ont consulté

Cette fois, je vais vous présenter jQuery pour implémenter la navigation par menu déroulant . Quelles sont les précautions pour que jQuery implémente la navigation par menu déroulant. Voici un cas pratique, jetons un coup d'oeil.

Cet article présente principalement jQuery pour implémenter une fonction de navigation simple dans le menu déroulant, impliquant les compétences opérationnelles de jQuery liées à la traversée des éléments de page et à la modification des nœuds. Les amis dans le besoin peuvent se référer à ce qui suit

Cet article. explique les exemples Utilisez jQuery pour implémenter une fonction de navigation simple dans le menu déroulant. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le code spécifique est le suivant :

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. .Pour des informations plus intéressantes, veuillez prêter attention à d'autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Comment utiliser Webpack pour écrire la configuration de l'environnement jquery

Comment le plug-in Validate de jQuery valide l'entrée valeurs

Comment convertir automatiquement les lettres majuscules et minuscules lorsque Jackson analyse une chaîne json

Que dois-je faire si il n'y a pas de réflexion une fois la demande ajax de données d'arrière-plan réussie ? Gérer l'utilisation du

panneau accordéon jQuery EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!