저희사이트는 모바일에서 인기글을 위와같이 보여줍니다 +버튼을 누르면 아래와같이 펼쳐서 보여줍니다
하지만 문제가 있습니다 js로 display :none 스타일을 넣어주다보니 순서가
페이지 열림 - 메뉴 펼쳐짐 - js로딩 - 메뉴 닫힘 순서가 되는데 페이지 접속시 메뉴가 처음부터 닫혀보이게 하고싶습니다
아래와 같은 형태인데 has_rank_only 클래스를 갖는 리스트가 생기고 거기서 1번째 has_rank_only만 보여주고 나머지는 가려주는 그런 소스입니다
도움주시면 감사하겠습니다
<style>
.off {
display : none;
}
.on {
display : block;
}
</style>
<script>
$(function(){
$('li.has_rank_only').not(':eq(0)').addClass("off");
$('button#open').not(':eq(0)').addClass("off");
$('span.list_rank_wrap').not(':eq(0)').addClass("off");
$('#open').click(function() {
$('li.has_rank_only').toggleClass('on');
})
})
</script>
<li class="<!--@if($wi->show_browser_title != 'Y')-->has_rank_only<!--@else-->has_both<!--@end-->"|cond="$wi->show_rank == 'Y'">
<span class="list_rank_wrap" cond="$wi->show_rank == 'Y'"><span class="vo_rank">인기글</span></span><span class="<!--@if($_is_mobile)-->list_browser<!--@else-->list_browser2<!--@end-->" cond="$wi->show_browser_title == 'Y' && $item->getBrowserTitle()"><a href="{getSiteUrl($item->domain, '', 'mid', $item->get('mid'))}">{$item->getBrowserTitle()}</a></span>
<span class="list_main">
<span class="list_vote" cond="$_has_vote && $item->get('voted_count')>0"><span class="pt_col">+</span> {$item->get('voted_count')}</span>
추천수 + 제목
</span>
<button id="open" >+</button>
</li>
하지만 문제가 있습니다 js로 display :none 스타일을 넣어주다보니
--->
흔하게 엘리먼트 style에 display:none 을 처리 해 놓으면 처음 불러올때는 안보이게 되고 이후 스크립트에 의해 display 값을 변경해 주면 됩니다.
아래 기진곰님 답변처럼 display:none 의 속성 클래스를 부여해도 됩니다.