[영화 검색 사이트] 인물 상세페이지 개발3 줄거리와 인물소개 자세히 보기

줄거리와 인물 상세정보 자세히 보기 

줄거리와 인물의 상세정보는 너무길어서 html이 파괴된다

그레서 1줄로 줄이고 클릭하면 자세히 보기를 할 수 있게 하였다.

 

css

/*인물의 상세정보 줄이기*/
.info_wrap > .info_box > ul > li:nth-child(4) >  p:nth-child(3) {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
/*active가 붙었을때*/
.info_wrap > .info_box > ul > li:nth-child(4) >  p:nth-child(3).active {
  height: auto;
  padding: 3%;
  background-color: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  overflow:initial;
  white-space:initial ;
  text-overflow: initial;
}

/*미디어 상세정보 줄이기*/
.appearance_list_box > ul > li > .app_infor_box > .overview > p:nth-child(3) {
  z-index: 95;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
/*active가 붙었을때*/
.appearance_list_box > ul > li > .app_infor_box > .overview.active > p:nth-child(3) {
  height: 100%;
  padding: 3%;
  background-color: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  overflow:initial;
  white-space:initial ;
  text-overflow: initial;
}

 

 overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;를 붙이면 긴글을 한줄로 줄일 수 있다.

active클래스가 붙었을때는   overflow: initial;  white-space: initial;  text-overflow: initial; 로 바꿔주면 된다.

 

JavaScript

// 출연작품 리스트의 줄거리 자세히 보기
let appearance_list = document.querySelector(".appearance_list_box > ul");

function appListFunc(num) {
  let overview = appearance_list.children[num].children[1].children[3];
  overview.classList.toggle("active");
}

// 인물 소개 자세히 보기
let info_list = document.querySelector(".info_wrap > .info_box > ul > li:nth-child(4) >  p:nth-child(3)");

function inforListFunc(num) {

  info_list.classList.toggle("active");
}

 

 

탭매뉴와 마찬가지로 클래스를 붙혔다. 땠다.해서 자세히 보기와 한줄로 줄이기를 반복한다.

classList.toggle은 한번클릭할때 class가 true면 false로 바꾸고 false면 true로 바꾼다.