이전 목록 다음
채택완료

jquery 슬라이드 메뉴 수정 좀 도와주세요.

가가슴시린하늘
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전 10,264
아래 코드를 이용해서 슬라이드 메뉴를 사용하려고 하는데요.

페이지를 로딩하면 전부 닫혀있는 상태가 아니라  item1이 선택되어져서 
item1은 슬라이드메뉴가 열려있게 하려면 어떤 코드를 추가해줘야 할까요?

Copy 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		
		<title>Vertical Navigation Menu: CSS3 Coded</title>
		
		<link rel="stylesheet" href="css/menustyles.css">
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		
	</head>
<body>

<div id="wrapper">

	<ul class="menu">
		<li class="item1"><a href="www.naver.com">Friends <span>340</span></a>
			<ul>
				<li class="subitem1"><a href="http://www.naver.com">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item2"><a href="#">Videos <span>147</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item3"><a href="#">Galleries <span>340</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item4"><a href="#">Podcasts <span>222</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item5"><a href="#">Robots <span>16</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
	</ul>

</div>

<!--initiate accordion-->
<script type="text/javascript">
	$(function() {
	
	    var menu_ul = $('.menu > li > ul'),
	           menu_a  = $('.menu > li > a');
	    
	    menu_ul.hide();
	
	    menu_a.click(function(e) {
	        e.preventDefault();
	        if(!$(this).hasClass('active')) {
	            menu_a.removeClass('active');
	            menu_ul.filter(':visible').slideUp('normal');
	            $(this).addClass('active').next().stop(true,true).slideDown('normal');
	        } else {
	            $(this).removeClass('active');
	            $(this).next().stop(true,true).slideUp('normal');
	        }
	    });
	
	});
</script>

</body>
</html>
그누보드5 javascript jquery
|

답변 4개 / 댓글 4개

채택된 답변
+20 포인트
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
Copy 
menu_ul.hide(); // 아래 추가
if(!menu_ul.hasClass('active')) {
	menu_ul.eq(0).show();
}

답변에 대한 댓글 1개

가슴시린하늘
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
감사합니다.

순서에 맞게 숫자만 바꿔주니 되네요!
지지더블류
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
script 아래에 넣어보세요

Copy 
<script type="text/javascript">	
	$(document).ready(function(){		
		$('.item1 ul').slideDown();
	});
</script>

답변에 대한 댓글 1개

가슴시린하늘
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
정말 감사드립니다. 너무 잘됩니다.
SLOOP
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
Copy 
<li class="item1"><a href="www.naver.com" class="active">Friends <span>340</span></a>

하면 댈꺼같네요

답변에 대한 댓글 1개

가슴시린하늘
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
css는 적용이 되는데 메뉴가 열리지는 않네요....ㅠㅠ
June44
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
Copy 
<li class="item1 active"><a href="www.naver.com">Friends <span>340</span></a>

답변에 대한 댓글 1개

가슴시린하늘
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
그렇게 했는데 안되네요...ㅜㅜ

답변을 작성하려면 로그인이 필요합니다.