질문/조언질답게시판
Extra Form
PHP PHP 7.3
CMS Rhymix

인기글.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="<[email protected]($wi->show_browser_title != 'Y')-->has_rank_only<[email protected]>has_both<[email protected]>"|cond="$wi->show_rank == 'Y'">
        <span class="list_rank_wrap" cond="$wi->show_rank == 'Y'"><span class="vo_rank">인기글</span></span><span class="<[email protected]($_is_mobile)-->list_browser<[email protected]>list_browser2<[email protected]>" 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>
 
  • profile

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

     

    --->

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

     

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

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

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

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

    예: <li class="has_rank_only off">

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