jquery는 클릭 가능한 텔레스코픽 및 확장 가능한 메뉴 효과를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery는 클릭 가능한 텔레스코픽 및 확장 가능한 메뉴 효과를 구현합니다.

May 16, 2016 pm 03:41 PM

jquery 확장하다 딸깍 하는 소리 메뉴

이 문서의 예에서는 클릭하여 확장할 수 있는 jquery의 메뉴 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jquery를 구현한 클릭 후 축소 및 확장 메뉴 코드입니다. 조작 방법은 누구나 알고 있습니다. 한 번 클릭하면 보조 메뉴의 내용이 확장되고, 다시 클릭하면 축소되는 아주 고전적인 메뉴입니다. .

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체적인 코드는 다음과 같습니다.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;JQ点击伸缩、展开的菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
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;}
&lt;/style&gt;
&lt;script type="text/javascript" src="jquery-1.6.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(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;
 });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;dl&gt;
 &lt;dt&gt;&lt;a href="#"&gt;郑州美食&lt;/a&gt;&lt;/dt&gt;
 &lt;dd&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;美食论坛&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;地方小吃&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;郑州酒店&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/dd&gt;
 &lt;dt&gt;&lt;a href="#"&gt;郑州交通&lt;/a&gt;&lt;/dt&gt;
 &lt;dd&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;新郑机场&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;周边高速&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/dd&gt;
 &lt;dt&gt;&lt;a href="#"&gt;郑州房产&lt;/a&gt;&lt;/dt&gt;
 &lt;dd&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;房产论坛&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;大河论坛&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;天下中原&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/dd&gt;
&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.