jQuery 다단계 아코디언 메뉴 구현

이 글에서는 다단계 아코디언 메뉴를 구현하기 위한 jQuery를 주로 소개합니다. 메뉴 효과가 더 독특한 경우가 있습니다.

아코디언 메뉴는 일반적으로 모양이 매우 간단하기 때문에 사용됩니다. 아코디언처럼 늘려서 사용할 수 있으며, 프로젝트에 아코디언 효과를 적절하게 적용하면 사용자에게 매우 좋은 경험을 선사할 것입니다. 이 기사에서는 jQuery 플러그인을 사용하여 아주 좋은 아코디언 효과 메뉴를 쉽게 만듭니다.

HTML
첫 번째로 헤드에 있는 jQuery와 플러그인을 참조하세요.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/accordion.js"></script>

다음으로, 본문 사이에 메뉴 본문 코드를 작성합니다. HTML 코드는 순서가 지정되지 않은 일련의 목록으로 구성됩니다.

<ul class="nav"> 
  <li><a href="//www.jb51.net">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">文章</a></a> 
    <ul> 
      <li><a href="#" target="_blank">XHTML/CSS</a></li> 
      <li><a href="#">Javascript/Ajax/jQuery</a> 
        <ul> 
          <li><a href="#">Cookies</a></li> 
          <li><a href="#">Event</a></li> 
          <li><a href="#">Games</a></li> 
          <li><a href="#">Images</a></li> 
        </ul> 
      </li> 
      <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
      <li><a href="#" target="_blank">前端观察</a></li> 
      <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
    </ul> 
  </li> 
  <li><a href="#">关于</a></li> 
</ul>

CSS
물론 화면에 매우 간결하게 표시되도록 하려면 순서가 지정되지 않은 이 목록에 스타일을 추가해야 합니다.

.nav {width: 213px; padding: 40px 28px 25px 0;} 
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;} 
ul.nav li {} 
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;  color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;} 
ul.nav ul li { margin: 0; padding: 0; clear: both;} 
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;} 
ul.nav ul ul li a {color:silver; padding-left: 40px;} 
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;} 
ul.nav span{float:right;}

jQuery
아코디언 플러그인을 호출하고 관련 속성을 설정하면 아름다운 아코디언 효과가 완성됩니다.

$(function(){ 
  $(".nav").accordion({ 
    speed: 500, 
    closedSign: '[+]', 
    openedSign: '[-]' 
  }); 
});

Accordion은 다음과 같은 옵션 설정을 제공합니다.
속도: 디지털 밀리초, 메뉴가 확장되고 닫히는 시간을 설정합니다.
closedSign: 하위 메뉴가 닫힐 때 메뉴 옆에 표시되는 내용은 HTML 또는 텍스트일 수 있습니다.
openedSign: 하위 메뉴가 확장되면 메뉴 옆에 표시되는 콘텐츠는 HTML 또는 텍스트일 수 있습니다.
참고로, 처음 로드할 때 메뉴를 확장하려면 해당 li에 class="active"를 추가하여 확장하면 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

3D 3차원 느낌의 은회색 세로 접기 메뉴를 구현하는 JS 코드

jquery 요소의 고유 속성 작동: prop() 및 RemoveProp()

위 내용은 jQuery 다단계 아코디언 메뉴 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!