jQuery는 접기 및 확장 메뉴 그룹 효과를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery는 접기 및 확장 메뉴 그룹 효과를 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

jquery 확장하다 겹

이 기사의 예에서는 접기 및 확장 메뉴 그룹 효과를 구현하는 jQuery 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jQuery로 구현한 아름다운 세로 접기 메뉴 그룹입니다. 처음 실행 시 페이지를 새로고침하고 jQ를 로드해 주세요. 이 메뉴는 널리 사용되며 배경 왼쪽과 전면에서 사용할 수 있습니다. 웹사이트 데스크. Tencent Weibo 오픈 플랫폼에서 찾아 모두와 공유하여 함께 공부하세요. 팁: 오류가 있는 경우 페이지를 새로고침하세요.

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

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

http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/

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

<!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>一个展开合拢的菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin:0; padding:0; }
ul,li { list-style:none; }
.catalog { width:164px; margin:0 auto;}
.t1 { height:4px; background:url(images/bg_catalog.gif) left top no-repeat; }
.t2 { background:url(images/bg_catalog.gif) -164px top repeat-y; }
.t3 { height:4px; background:url(images/bg_catalog.gif) left bottom no-repeat; }
.t2 h2 { height:81px; background:url(images/bg_catalog_logo.gif) center no-repeat; text-indent:-9999px; }
.t2 h3 { heigth:36px; line-height:36px; margin:0 1px; text-indent:26px; background:url(images/bg_catalog_icon.gif) no-repeat 13px 14px; font-size:14px; border-top:1px solid #fFF; }
.t2 ul { padding:10px 0; font-size:12px; }
.t2 li { text-indent:27px; height:30px; line-height:30px; }
.selected { display:block;}
.unselected {display:none;}
</style>
</head>
<body>
<div class="re_left">
<div class="catalog">
<div class="t1"></div> 
<div class="t2">
 <h2>资源</h2>
 <h3><a href="javascript:void(0);" src="#">平台使用说明</a></h3>
 <ul class="unselected">
 <li><a href="#">平台介绍</a></li>
 <li><a href="#">应用开发说明</a></li>
 <li><a href="#">应用审核流程</a></li>
 <li style="display:none;"><a href="#">成功案例</a></li>
 <li><a href="#">开发者协议</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">API说明</a></h3>
 <ul class="unselected">
 <li><a href="#">API文档</a></li>
 <li><a href="#">Oauth授权说明</a></li>
 <li><a href="#">API调用权限</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">SDK及资源下载</a></h3>
 <ul class="unselected">
 <li><a href="#">SDK下载</a></li>
 <li><a href="#">视觉素材下载</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">帮助中心</a></h3>
 <ul class="unselected">
 <li><a href="#">常见问题解答</a></li>
 <li><a href="#">返回错误码说明</a></li>
 </ul>
</div>
<div class="t3"></div>
</div>
</div>
<script type="text/javascript">
 $(document).ready(function(){
 var catalogIndex=[0,0];
 if (catalogIndex[0]==2){catalogIndex[0]=3;}
 else if(catalogIndex[0]==3){catalogIndex[0]=2;}
 if(catalogIndex.length==0){catalogIndex=[0,0];}
 $(".re_left .catalog h3 a").each(function(){
  $(this).attr("src",$(this).attr("href"));
  });
 $(".re_left .catalog").find("ul").css("border-bottom",0).end().find("h3:eq("+catalogIndex[0]+")").addClass("open").find("a").attr("href","javascript:void(0);").end().next().css("display","block").find("li:eq("+(catalogIndex[1]-1==-1&#63;9999:catalogIndex[1]-1)+")").addClass("active");$(".re_left .catalog").find("h3").last().css("border-bottom-width","0");});
$(".re_left .catalog").find("h3").bind("click",function(){
  if ($(this).hasClass("open"))
  {
  if ($(this).next().find(".active").size()==0)
  {
   $(this).next().slideUp(500,function(){
   $(this).prev().removeClass("open");
   }); 
  }
  else
  {
   $(this).next().slideUp(500,function(){
   $(this).prev().removeClass("open");
   //window.location.href=$(this).prev().find("a").attr("src");
   });
  }
  }
  else
  {
  $(this).parent().find("ul").slideUp("slow").end().find("h3").removeClass("open");
  $(this).addClass("open").next().slideDown(500,function(){
  if ($(this).nextAll("h3").size()>0)
  {$(this).parent().find("h3").last().css("border-bottom-width","1px");}
  else
  {$(this).parent().find("h3").last().css("border-bottom-width","0");}
  window.location.href=$(this).prev().find("a").attr("src");
  });
  }
  return false;
}); 
</script>
<br><div align="center">提示：如果有错误，请刷新页面。</div>
</body>
</html>

로그인 후 복사

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

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7530

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

구글 픽셀 9 프로 폴드 휴대폰 케이스 노출 : 6.4인치 외부 스크린, 8.02인치 내부 스크린 Jun 25, 2024 pm 02:35 PM

25일 뉴스에 따르면, 출처 ytechb는 어제(24일) 블로그 게시물을 게재해 구글 픽셀9 프로 폴드 휴대폰 케이스 렌더링을 공유하며, 이 병풍의 뒷면 디자인을 다시 한 번 보여줬다. 이전 소식에 따르면, 구글은 올해 10월 픽셀 9 시리즈 휴대폰을 출시할 예정이며, 픽셀 9 시리즈 휴대폰 3종 외에 픽셀 폴드도 픽셀 9 시리즈에 포함돼 공식 명칭은 픽셀 9이 될 예정이다. 프로 폴드. 이번에 노출된 휴대폰 케이스는 액세서리 제조사 토로(Torro)의 영국, 미국 온라인 매장에 제품 휴대폰 케이스를 게재하고 휴대폰의 디자인과 디스플레이 사이즈를 공개한 바 있다. 이 페이지에는 다수의 Pixel 9 Pro Fold 휴대전화 케이스 렌더링이 표시됩니다.

삼성 1만위안 폴더블폰 W25 공개 : 500만 화소 전면 언더스크린 카메라, 더 얇아진 본체 Aug 23, 2024 pm 12:43 PM

8월 23일 뉴스에 따르면, 삼성전자는 9월 말 공개될 예정인 새로운 폴더블폰 W25를 출시할 예정이다. 이에 맞춰 언더스크린 전면 카메라와 본체 두께도 개선될 예정이다. 보도에 따르면, 코드명 Q6A인 삼성 W25에는 갤럭시 Z 폴드 시리즈의 400만 화소 카메라보다 향상된 500만 화소 언더 스크린 카메라가 장착될 예정입니다. 또한 W25의 외부 화면 전면 카메라와 초광각 카메라는 각각 1,000만 화소와 1,200만 화소가 될 것으로 예상된다. 디자인적으로 보면 W25는 접힌 상태에서 두께가 약 10mm로 표준형 갤럭시Z폴드6보다 약 2mm 얇아졌다. 화면 측면에서는 W25가 6.5인치 외부 화면과 8인치 내부 화면을 갖고 있는 반면, 갤럭시Z폴드6는 6.3인치 외부 화면과 8인치 내부 화면을 갖고 있다.

삼성 갤럭시 Z 플립 6 모델 최초 공개: 베젤이 더 좁아지고 주름이 여전히 존재함 Jun 22, 2024 am 03:28 AM

21일 뉴스에 따르면 최근 외신들은 삼성 갤럭시Z플립6의 모델 사진을 인터넷에 공개했다. 사진에 따르면 삼성 갤럭시 Z 플립 6의 테두리가 더욱 좁아져 접힌 상태에서 휴대폰의 너비가 줄어들 수 있음을 의미하며, 더욱 편안한 그립감과 휴대성을 제공한다는 것을 알 수 있습니다. . 더욱이 갤럭시 ZFlip6 모델은 이전 세대 ZFlip5에 비해 좀 더 사각형이 되었고, 후면 카메라 모듈도 새로운 카메라 센서를 채용할 것으로 예상됩니다. 다만, 전면에서 보면 여전히 휴대폰의 주름이 비교적 뚜렷하지만, 유출된 모델이 모델폰이라는 점을 고려하면 실제 휴대폰과 다소 차이가 있을 수 있으므로 참고용으로만 사용하시기 바랍니다. 성능 구성으로 보면 갤럭시는

접이식 스크린 휴대폰의 가장 큰 단점: 핵심 응용 시나리오가 없음 Mar 16, 2024 am 09:04 AM

오늘 우리가 논의하는 것은 특정 제품이 어떤 것인지가 아니라, '접이식 화면' 자체의 주제로 돌아가서 접는식 화면 휴대폰의 '합리성'에 대해 탐구하는 것입니다. 먼저, 폴더블폰 시장실적을 살펴보자. IDC 최신 자료에 따르면, 2023년 중국 폴더블폰 시장은 전년 대비 114.5% 증가한 약 700만7000대를 출하할 것으로 예상된다. 그중 중국 폴더블 스크린 휴대폰 시장은 2023년 4분기 약 277만1000대를 출하해 전년 동기 대비 149.6% 증가한 것으로 나타났다. 데이터도 좋아 보이고 성장세도 매우 강하다. 하지만 2023년 중국 시장의 스마트폰 출하량 약 2억 7천만 대에 비하면 이 데이터는 정말 부족하다. 일반적으로

단어 접기에 대해 알고 싶나요? Mar 19, 2024 pm 07:49 PM

Word에서 텍스트 내용을 편집한 후에는 편집된 내용을 보고 확인해야 합니다. 내용이 많으면 읽기가 불편한데, 이런 경우에는 단어 접기 방법이 필요한가요? 편집자가 방법 튜토리얼을 모든 친구들과 공유하게 하세요! 먼저 컴퓨터에서 Word 문서를 열고 필요한 내용을 입력하고 선택한 다음 메뉴 표시줄에서 "시작" 옵션을 클릭하고 방금 선택한 텍스트 단락에 적용할 스타일을 선택합니다. 아래 사진에서 빨간색 원으로 표시된 부분을 참고하시면 됩니다. 2. 그러면 선택한 텍스트 단락의 스타일이 변경되고 아래 그림의 빨간색 원에 표시된 대로 작은 화살표가 추가됩니다. 3. 작은 화살표를 클릭하여 이전에 선택한 텍스트 단락을 자유롭게 확장하거나 축소하거나 직접 마우스 오른쪽 버튼을 클릭합니다. , 에서

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

See all articles

jQuery는 접기 및 확장 메뉴 그룹 효과를 구현합니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제