인기글 열고닫기 구현시 문제..

2019.07.01 02:15

433

CMS/프레임워크	Rhymix 1.9
개발 언어	PHP 7.3

인기글.PNG

저희사이트는 모바일에서 인기글을 위와같이 보여줍니다 +버튼을 누르면 아래와같이 펼쳐서 보여줍니다

인기글2.PNG

하지만 문제가 있습니다 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>
 

스포 Lv. 5

웹지기

2019.07.01 02:18 #1237202

하지만 문제가 있습니다 js로 display :none 스타일을 넣어주다보니

--->

흔하게 엘리먼트 style에 display:none 을 처리 해 놓으면 처음 불러올때는 안보이게 되고 이후 스크립트에 의해 display 값을 변경해 주면 됩니다.

아래 기진곰님 답변처럼 display:none 의 속성 클래스를 부여해도 됩니다.

추천 1
스포

2019.07.01 03:23 #1237252

감사합니다!! 클래스 부여해서 해결했습니다!

추천 0
기진곰

2019.07.01 02:21 #1237207

표시 여부를 style이 아닌 class로 컨트롤하고 계시니, 처음부터 "off" class를 넣어놓으면 되겠네요.

태그 하나에 class를 여러 개 넣을 때는 중간에 한 칸씩 띄워 주면 됩니다.

예: <li class="has_rank_only off">

추천 1
스포

2019.07.01 03:24 #1237256

항상 감사드립니다 ㅠㅠ 위 방법으로 해결했습니다

추천 0