[JQuery]jQuery 자체 제작 간이 아코디언 효과(실현 원리 첨부)

아코디언 효 과 는 홈 페이지 왼쪽 에 있 는 네 비게 이 션 바 에 자주 사용 된다.네 비게 이 션 내용 이 비교적 많 을 때 아코디언 의 전시 방식 을 사용 하면 정보의 전달 과 조판 에 유리 하 다.다음은 자신 이 만 든 간단 한 아코디언 효 과 를 공유 하고 그림 을 사용 하지 않 으 며 배경 색 도 임의로 설정 한 것 이 므 로 실제 프로젝트 에서 여러분 이 적당 하 게 수정 할 수 있다.
효과 그림:
실현 원리:
1.span 탭(즉,1 급 네 비게 이 션)을 마우스 로 클릭 할 때 하위 디 렉 터 리 li 가 펼 쳐 졌 는 지 판단 합 니 다(여기 서 on 클래스 로 표 시 됩 니 다).2.만약 에 그렇다면 현재 li 를 줄 이 고 on 류 표 시 를 옮 기 며 span 오른쪽 에 있 는 제시 부 호 를 플러스 로 수정 합 니 다.3.그렇지 않 으 면 현재 li 를 펼 치고 on 류 표 시 를 추가 하 며 span 오른쪽 에 있 는 제시 부 호 를 마이너스 로 수정 합 니 다.
원본 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>     </title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
	body,ul,li{margin: 0 auto;padding: 0;}
	ul,li{list-style-type: none;cursor: pointer;color: white;line-height: 28px;text-align: center;}
	ul{width: 150px;}
	ul span{background-color: green;display: block;font-weight: bold;border-bottom: 1px solid #ccc;}
	ul:last-child span{border-bottom: none;}
	li{background-color: black;display: none;}
	li:hover{background-color: orange;}
	b{display: inline;float: right;padding-right: 10px;}
</style>
</head>
<body>
    <ul>
    	<span>AAAAA<b>+</b></span>
    	<li>11111</li>
    	<li>11111</li>
    	<li>11111</li>
    	<li>11111</li>
    </ul>
    <ul>
    	<span>BBBBB<b>+</b></span>
    	<li>22222</li>
    	<li>22222</li>
    	<li>22222</li>
    </ul>
    <ul>
    	<span>CCCCC<b>+</b></span>
    	<li>33333</li>
    	<li>33333</li>
    	<li>33333</li>
    	<li>33333</li>
    	<li>33333</li>
    </ul>
    <ul>
    	<span>DDDDD<b>+</b></span>
    	<li>44444</li>
    	<li>44444</li>
    </ul>
    <ul>
    	<span>EEEEE<b>+</b></span>
    	<li>55555</li>
    	<li>55555</li>
    	<li>55555</li>
    </ul>
    <script type="text/javascript">
    	$(function(){
    		$('span').click(function(){
    			if($(this).siblings('li').hasClass('on')){
    				$(this).siblings('li').slideUp(500).removeClass('on');
    				$(this).children('b').text('+');
    			}else{
    				$(this).siblings('li').slideDown(500).addClass('on');
    				$(this).children('b').text('-');
    			}
    		});
    	});
    </script>
</body>
</html>

됐어,이렇게 간단 한 아코디언 하나 면 돼~
저자:공지
Sign:길이 멀 어 요.저 는 위아래 로 찾 아 보 겠 습 니 다.

[JQuery]jQuery 자체 제작 간이 아코디언 효과(실현 원리 첨부)

좋은 웹페이지 즐겨찾기