jquery 슬라이드 메뉴 수정 좀 도와주세요.
본문
아래 코드를 이용해서 슬라이드 메뉴를 사용하려고 하는데요.
페이지를 로딩하면 전부 닫혀있는 상태가 아니라 item1이 선택되어져서
item1은 슬라이드메뉴가 열려있게 하려면 어떤 코드를 추가해줘야 할까요?
<!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>
답변 4
menu_ul.hide(); // 아래 추가
if(!menu_ul.hasClass('active')) {
menu_ul.eq(0).show();
}
감사합니다.
순서에 맞게 숫자만 바꿔주니 되네요!
script 아래에 넣어보세요
<script type="text/javascript">
$(document).ready(function(){
$('.item1 ul').slideDown();
});
</script>
정말 감사드립니다. 너무 잘됩니다.
<li class="item1 active"><a href="www.naver.com">Friends <span>340</span></a>
그렇게 했는데 안되네요...ㅜㅜ
<li class="item1"><a href="www.naver.com" class="active">Friends <span>340</span></a>하면 댈꺼같네요
css는 적용이 되는데 메뉴가 열리지는 않네요....ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
