recherche

Maison  >  Article  >  interface Web  >  jQuery implémente simplement l'effet de menu déroulant à deux niveaux code_jquery

jQuery implémente simplement l'effet de menu déroulant à deux niveaux code_jquery

WBOY
WBOYoriginal
2016-05-16 15:39:161214parcourir

L'exemple de cet article décrit l'implémentation simple jQuery du code d'effet du menu déroulant à deux niveaux. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu déroulant à deux niveaux, version plug-in jquery, qui fonctionne bien sous IE6/IE7/IE8. Dans cet exemple, le menu n'affiche que quatre groupes, mais le principe est le même. Le menu est plus long, copiez-le directement. Un seul ensemble fonctionnera jusqu'à ce qu'il réponde à votre application.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-simple-2l-slideout-menu-codes/

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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>两级下拉菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }
</style>
</head>
<body>
<ul id="mainNav" class="nav" >
<li><a href="javascript:void(0);">首 页</a></li>
<li><a href="javascript:void(0);">导航菜单</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">采购</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" >企业采购</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业评测</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业报价</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">行情报价</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航1</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航2</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航3</a></li>
</ul>
</li>
</ul>
<script language="JavaScript" type="text/javascript">
<!--
$(document).ready(function(){
 var li = $("#mainNav > li"); //找到#mainNav中子元素li；
 var ul;
 li.each(function(i){ //循环每一个LI
  li.eq(i).hover(
   function(){
    $(this).find("ul").show(); //找到li里面的ul元素设置为显示
   },
   function(){
    $(this).find("ul").hide(); 
   }
  )
 })
})
//-->
</script>
</body>
</html>

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'effet d'onglet classique implémenté par les compétences JS CSS_javascriptArticle suivant：Code d'effet d'onglet classique implémenté par les compétences JS CSS_javascript

Articles Liés

Voir plus