위젯접기가 가능 할까요?
CMS/프레임워크 | Rhymix 1.9 |
---|---|
개발 언어 | PHP 7.3 |
모바일에서 인기글을 출력하려는 용도인데 인기글 목록 위젯에 5개가 있다면 1개만 노출하고 펼침하면 다보이게 하고싶습다
예
1.xxxxxx 열기
열기누를시
1. Xxxxxxx. 닫기
2. Xxxxxxx
3. Xxxxxxx
4. Xxxxxxx
5. Xxxxxxx
스포
Lv. 5
CMS/프레임워크 | Rhymix 1.9 |
---|---|
개발 언어 | PHP 7.3 |
모바일에서 인기글을 출력하려는 용도인데 인기글 목록 위젯에 5개가 있다면 1개만 노출하고 펼침하면 다보이게 하고싶습다
예
1.xxxxxx 열기
열기누를시
1. Xxxxxxx. 닫기
2. Xxxxxxx
3. Xxxxxxx
4. Xxxxxxx
5. Xxxxxxx
댓글 9
일단 목록의 li를 display:none 처리하신 다음에 클라스명1{display:block} 처리하셔서 한줄만 보이게 한 다음에
열기 누르면 li를 감싸는 ul에 특정 클라스명이 붙게하고
ul클라스명 li{display:block} 처리하시면 다 보일겁니다.
닫기 하시려면 다시 ul에서 클라스명 가지고 가면 되고요.
css를 작성하실때
.test_ul 이라는 클라스명의 li가 5개 까지 있고
만약 li에 .test_li1 ~ .test_li5 까지 class명을 먹일 수 있다면(이 방법은 여러곳에 나올겁니다.)
먼저 .test_ul li{display:none} 처리를 해서 .test_ul의 li들은 다 안보이게 합니다.
그 후에 .test_ul li.test_li1{display:block} 처리를 해서 첫줄은 노출을 시키는거죠.
이게 기본 형태이고
열고닫기 버튼을 클릭할때 .test_ul에 test_on 이라는 클라스명이 붙고 지우게 만들어 둔 후
.test_on li{display:block} 처리를 하면 클릭할때만 보이게 됩니다.
이걸 css 파일에 순서대로 적으면
.test_ul li{display:none}
.test_ul li.test_li1{display:block}
.test_on li{display:block}
이런 형태가 될겁니다.
css 규정에서 우선순을 두는 방식인데요.
.test_ul li 보다는 .test_ul li.test_li1 이게 더 우선순을 가집니다.
이유는 같은 ul에서 클라스명을 가지지만 앞순은 li로 그냥 모든 li에 대해 규정하지만 그 밑에는
.test_ul li.test_li1이라고 li중에 test_li1을 특정시키기에 css에서는 이걸 더 우선으로 쳐 줍니다.
그 다음이 .test_on li 과 .test_ul li은 같은 무게를 가진 규정입니다. ul에만 클라스명이 있고 li나 ul 상위에 따로 클라스명을 정해두지 않았기 때문에 같은 높이에 있다고 보시면 됩니다.
같은 높이의 규정일때는 나중에 오는가 먼저 오는가에 따라 우선순이 달라집니다.
나중에 나오는 규정을 더 높게 보다보니...
.test_on li를 나중에 배치해서 test_on 이라는 클라스명이 있을때만 보이게 처리하는겁니다.
감사합니다 제가 제대로 해봤는지는 모르겠지만... 읽고 말씀대로 적용해보니 적용해보니 위젯의 형태는 남아있으면서 li만 안보이는 현상이 발생합니다 그래서 생각해본것이 위젯 제목영역에
[1]게시글제목 ------- 열기/닫기
열었을때는
[2]게시글제목
[3]게시글제목
[4]게시글제목
이런형태로 보여주려고 하는데
<!--@foreach($wi->content_items as $key => $item)-->
{@
$x_date = strtotime($item->getRegDate('YmdHi'));
$z_date = strtotime(zdate($item->get('last_update'),'YmdHi'));
$new_atc = $x_date > $y_date; $updated = $z_date > $y_date;
$time_calc = time() - $x_date;
$length = mb_strlen(trim(preg_replace('/\s+/', ' ', strip_tags($item->getTitle()))), 'UTF-8');
}
여기서
<!--@foreach($wi->content_items as $key => $item)--> 이값을 첫번째값만 보여주는거랑
첫번째값을 제외하고 2번째 값부터 불러오는 부분에서 막혔는데 도움 받을수 있을까요
밑에 $i_dex = 1;
추가하시고요
그리고 class 명으로 되어있는부분에 {$i_dex}를 추가하셔요
예를들어 class="test" 라되어있으면 class="test {$i_dex}" 이런식으로 추가하시면
그리고 <!--@end--> 라고 되어있는 부분 전에 {@ i_dex++;} 추가해주시면
출력될때 test 1, test 2, test 3 이런식으로 출력됩니다.
이걸
.test{display:none}
.test.1{display:block}
하시면 첫번째것만 보실수 있을거에요