jquery melaksanakan kod_jquery kesan menu teleskopik dan boleh dikembangkan yang boleh diklik-tutorial js-php.cn

jquery melaksanakan kod_jquery kesan menu teleskopik dan boleh dikembangkan yang boleh diklik

WBOY

Lepaskan： 2016-05-16 15:41:15

asal

1310 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod kesan menu jquery yang boleh diklik untuk mengembangkan dan mengembangkan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod menu klik-untuk-tarik dan kembangkan yang dilaksanakan jquery Semua orang tahu kaedah operasi Klik sekali untuk mengembangkan kandungan menu kedua, dan klik sekali lagi untuk meruntuhkannya .

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.