search

Home >Web Front-end >JS Tutorial >Example of dynamic retractable navigation menu implemented by jQuery_jquery

Example of dynamic retractable navigation menu implemented by jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:00:131359browse

The example in this article describes the dynamic retractable navigation menu implemented by jQuery. Share it with everyone for your reference. The specific implementation method is as follows: 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery select</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body {padding:10px; font-family:"宋体"}
* {margin:0; padding:0; font-size:12px;}
a{ color: #333;}
ul,li {
list-style-type:none;
}
.menu_list li a {
display:block; line-height:30px;
text-align:center; height:30px;
background:#e8e8e8; border-bottom:1px solid #ccc;
}
.hover {
background:#e8e8e8;
}
.div1{
height:200px; display:none;
padding:5px;
}
.menu_list{
width:200px; background:#f2f2f2;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
 $(".menu_list ul li").click(function()
 {
 if($(this).children(".div1").is(":hidden"))
 //判断对象是显示还是隐藏
 {
  if(!$(this).children(".div1").is(":animated")){
  //如果当前没有进行动画，则添加新动画
  $(this).children(".div1").animate({height:'show'},1000)
  .end().siblings().find(".div1").hide(1000);}
 }else{
  if(!$(this).children(".div1").is(":animated")){
  $(this).children(".div1").animate({height:'hide'},1000)
  .end().siblings().find(".div1").hide(1000);}
  }
  }
 );
});
</script>
<div class="menu_list" id="secondpane">
  <ul>
  <li class="">
  <a href="javascript:void(0);" class="a1">网页特效</a>
  <div class="div1">js特效,网页特效</div>
  </li>
  <li class="">
  <a href="javascript:void(0);" class="a1">网页模板</a>
  <div class="div1">网页模板下载</div>
  </li>
  <li class="">
  <a href="javascript:void(0);" class="a1" style="border:none;">联系我们 </a>
  <div class="div1" style="border-top:1px solid #ccc;">关于脚本之家</div>
  </li>
 </ul>
 </div>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript hides and displays passwords_javascript skillsNext article：JavaScript hides and displays passwords_javascript skills

Related articles

See more