search

Home  >  Article  >  Web Front-end  >  jquery implements clickable telescopic and expandable menu effect code_jquery

jquery implements clickable telescopic and expandable menu effect code_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:151272browse

The example in this article describes jquery’s menu effect code that can be clicked to expand and expand. Share it with everyone for your reference. The details are as follows:

This is a jquery-implemented click-to-retract and expand menu code. Everyone knows the operation method. Click once to expand the content of the secondary menu, and click again to collapse it. It is a very classic folding menu.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/

The specific code 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>JQ点击伸缩、展开的菜单</title>
<style type="text/css">
body { font-family: Arial; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background-color:#ae8758; background-image:url(images/201207.png); background-repeat:no-repeat; background-position:5px 13px; font-size: 18px; padding: 5px 5px 5px 20px; margin: 2px; height:29px; line-height:28px; }
dt a { color: #FFF; text-decoration:none; }
dd a { color: #000; }
ul{ list-style: none; padding:5px 5px 5px 20px; margin:0; }
li{ line-height:24px;}
.bg{ background-position:5px -16px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("dd").hide();
 $("dt a").click(function(){
 $(this).parent().toggleClass("bg");
 $(this).parent().prevAll("dt").removeClass("bg")
 $(this).parent().nextAll("dt").removeClass("bg")
 $(this).parent().next().slideToggle();
 $(this).parent().prevAll("dd").slideUp("slow");
 $(this).parent().next().nextAll("dd").slideUp("slow");
 return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">郑州美食</a></dt>
 <dd>
 <ul>
  <li><a href="#">美食论坛</a></li>
  <li><a href="#">地方小吃</a></li>
  <li><a href="#">郑州酒店</a></li>
 </ul>
 </dd>
 <dt><a href="#">郑州交通</a></dt>
 <dd>
 <ul>
  <li><a href="#">新郑机场</a></li>
  <li><a href="#">周边高速</a></li>
 </ul>
 </dd>
 <dt><a href="#">郑州房产</a></dt>
 <dd>
 <ul>
  <li><a href="#">房产论坛</a></li>
  <li><a href="#">大河论坛</a></li>
  <li><a href="#">天下中原</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

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

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：Summary of common jquery functions and methods_jqueryNext article：Summary of common jquery functions and methods_jquery

Related articles

See more