jquery 슬라이드 메뉴 수정 좀 도와주세요. 채택완료
가슴시린하늘
11년 전
조회 10,055
아래 코드를 이용해서 슬라이드 메뉴를 사용하려고 하는데요.
페이지를 로딩하면 전부 닫혀있는 상태가 아니라 item1이 선택되어져서
item1은 슬라이드메뉴가 열려있게 하려면 어떤 코드를 추가해줘야 할까요?
<div>
<div><!DOCTYPE html></div>
<div><html lang="en"></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><head></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><meta charset="utf-8"></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><title>Vertical Navigation Menu: CSS3 Coded</title></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><link rel="stylesheet" href="css/menustyles.css"></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</a>"></script></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></head></div>
<div><body></div>
<div>
</div>
<div><div id="wrapper"></div>
<div>
</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><ul class="menu"></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="item1"><a href="www.naver.com">Friends <span>340</span></a></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem1"><a href="<a href="http://www.naver.com" target="_blank" rel="noopener noreferrer">http://www.naver.com</a>">Cute Kittens <span>14</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="item2"><a href="#">Videos <span>147</span></a></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="item3"><a href="#">Galleries <span>340</span></a></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="item4"><a href="#">Podcasts <span>222</span></a></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="item5"><a href="#">Robots <span>16</span></a></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></ul></div>
<div>
</div>
<div></div></div>
<div>
</div>
<div><!--initiate accordion--></div>
<div><script type="text/javascript"></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>$(function() {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> var menu_ul = $('.menu > li > ul'),</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> menu_a = $('.menu > li > a');</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> </div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> menu_ul.hide();</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> menu_a.click(function(e) {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> e.preventDefault();</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> if(!$(this).hasClass('active')) {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> menu_a.removeClass('active');</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> menu_ul.filter(':visible').slideUp('normal');</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> $(this).addClass('active').next().stop(true,true).slideDown('normal');</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> } else {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> $(this).removeClass('active');</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> $(this).next().stop(true,true).slideUp('normal');</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> }</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span> });</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>});</div>
<div></script></div>
<div>
</div>
<div></body></div>
<div></html></div>
<div>
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
채택된 답변
+20 포인트
11년 전
</div>
<div>menu_ul.hide(); // 아래 추가</div>
<div><span style="font-size: 10pt; line-height: 1.5">if(!menu_ul.hasClass('active')) {</span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>menu_ul.eq(0).show();</div>
<div>}</div>
<div>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
가슴시린하늘
11년 전
댓글을 작성하려면 로그인이 필요합니다.
11년 전
script 아래에 넣어보세요
<div>
<div><script type="text/javascript"><span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>$(document).ready(function(){<span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>$('.item1 ul').slideDown();</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>});</div>
<div></script></div>
<div>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
가슴시린하늘
11년 전
정말 감사드립니다. 너무 잘됩니다.
댓글을 작성하려면 로그인이 필요합니다.
11년 전
</span></font><code class="plain" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important"><li </code><code class="keyword" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: bold !important; color: #006699 !important">class</code><code class="plain" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important">=</code><code class="string" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; color: blue !important">"item1"</code><code class="plain" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important">><a href=</code><code class="string" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; color: blue !important">"www.naver.com" class="active"</code><code class="plain" style="background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important">>Friends <span>340</span></code><code class="plain" style="font-size: 10pt; background-color: #f8f8f8; line-height: 23.54400062561035px; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; background-image: none !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important"></a></code><font face="Consolas, Bitstream Vera Sans Mono, Courier New, Courier, monospace" style="font-size: 10pt; line-height: 1.5"><span style="line-height: 23.39280128479004px">하면 댈꺼같네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
가슴시린하늘
11년 전
css는 적용이 되는데 메뉴가 열리지는 않네요....ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
11년 전
<code class="spaces"></code><code class="plain"><li </code><code class="keyword">class</code><code class="plain">=</code><code class="string">"item1 active"</code><code class="plain">><a href=</code><code class="string">"www.naver.com"</code><code class="plain">>Friends <span>340</span></a></code>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
가슴시린하늘
11년 전
그렇게 했는데 안되네요...ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
순서에 맞게 숫자만 바꿔주니 되네요!