질문/조언팁/리소스 공유

KakaoTalk_20181126_133014222.png

 

지난 번에 2줄 이상일 경우 자세히보기 버튼이 추가되고... 닫기 버튼은 안 만들었는데 이번에 추가했습니다.

 

<style>
   .commentbox{overflow:hidden;}
   .commentbox .xe_content{margin-top:5px;}
   .commentbox .xe_content.hiddenComment p,
   .commentbox .xe_content.hiddenComment{
      white-space:nowrap;
      word-wrap:normal;
      width:90%;
      overflow:hidden;
      text-overflow: ellipsis;
      float:left;
      
   }
   .commentbox .xe_content.hiddenComment p{width:100%;}
   .btn-moreComment{display:none;white-space:nowrap;float:right;padding-top:5px;}
   .btn-moreComment.hidden{display:none !important;}
   .btn-closeComment{
      display:none;
      border: 0px solid #eee;
      padding: 0px 5px;
      vertical-align: middle;
      background: #fe989c;
      color: #fff;
      font-size: 12px;
      font-weight: 100;
      position: relative;
      margin-right: 5px;
      border-radius: 2px;
      height: 19px;
      float:right;
      cursor:pointer;
      margin-top:4px;
   }
   .btn-closeComment.active{
      display:inline-block;
   }
   @media screen and (max-width: 533px){
      .commentbox .xe_content.hiddenComment{
         width:75%;
      }
   }
</style>
<div class="commentbox">
   {$comment->getContent(false)}
   <div class="btn-moreComment">&lt자세히보기&gt</div>
   <div class="btn-closeComment">[닫기]</div>
</div>
<script>
   jQuery(function ($) {
      var commentbox = $('.commentbox .xe_content');
      commentbox.each( function() {
         $( this ).outerHeight();
         if( $(this).outerHeight() > 21 ){
            $(this).addClass('hiddenComment');
            var btnMoreCmt = $(this).siblings('.btn-moreComment');
            btnMoreCmt.show();
            btnMoreCmt.on("click",function(){
               $(this).siblings('.xe_content').removeClass('hiddenComment');
               $(this).siblings(".btn-closeComment").addClass("active");
               $(this).addClass("hidden");
            });
            //코멘트 닫기
            var btnCloseCmt = $(this).siblings('.btn-closeComment');
            btnCloseCmt.on("click",function(){
               $(this).removeClass("active");
               $(this).siblings('.xe_content').addClass('hiddenComment');
               btnMoreCmt.removeClass("hidden");
               
            });
         }
      } );
   });
</script>
<!--@end-->

 

글쓴이 이온디

profile
이온디는 웹솔루션제작전문회사로써, 웹에 대한 전문적인 지식을 바탕으로 고객님들의 비즈니스를 브랜딩해드립니다. CMS(Contents Management System) 설치부터 사용까지 XpressEngine와 WordPress를 통해서 손쉽게 웹사이를 구축할 수 있게 도와드리고 있습니다. SEO, 반응형웹, 적응형웹 등 고객의 니즈를 반영한 다양한 웹솔루션 기술과 노하우로 온라인 비즈니스를 효율적으로 운영할 수 있습니다.

http://eond.com

#워드프레스 #XE #그누보드 #제로보드 #카페24 쇼핑몰 #우커머스 #Shopify #영카트 #누리고 #가비아퍼스트몰
#홈페이지제작의뢰상담전문.
  • ?
    감사합니다.
  • profile

    ie, chrome, firefox의 브라우져에 따라 "<style>"이 적용되고, 안되고 하는군요!
    <style>을 아래와 같이 바꾸니 브라우져에 관계 없이 <style>가 적용되는 군요.

    아래의 스타일은 https://xetown.com/tips/1110772#comment_1111513 을 참고하여 수정한 스타일입니다.
    없는 실력으로 작성한거라..., 다듬을 부분이 있으면 다듬어 주세요!

     

    <style>
       .commentbox{overflow:hidden;}
       .commentbox .xe_content{margin-top:0px;}
       <?if(strpos($_SERVER['HTTP_USER_AGENT'],'MSIE')!==FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Trident')!==FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Firefox')!==FALSE){?> 
    .commentbox .xe_content.hiddenComment p,
    <?}?>
       .commentbox .xe_content.hiddenComment{
       <?if(strpos($_SERVER['HTTP_USER_AGENT'],'MSIE')!==FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Trident')!==FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Firefox')!==FALSE){?> white-space:nowrap; <?}?>
       float:left;  width:100%; overflow:hidden; text-overflow:ellipsis; display:block; 
       <?if(strpos($_SERVER['HTTP_USER_AGENT'],'AppleWebKit')!==FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Chrome')!==FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Safari')!==FALSE){?>
       display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; 
       <?}?>
       word-wrap:break-word; line-height:1.8em; height:1.8em;}
       .commentbox .xe_content.hiddenComment p{width:100%;}
       .btn-moreComment{display:none;white-space:nowrap;float:right;padding-top:5px;cursor:pointer;}
       .btn-moreComment.hidden{display:none !important;}
       .btn-closeComment{display:none; border: 0px solid #eee; padding: 0px 5px; vertical-align: middle; background: #fe989c; color: #fff; font-size: 12px; font-weight: 100; position: relative; margin-right: 5px; border-radius: 2px; height: 19px; float:right; cursor:pointer; margin-top:4px;}
       .btn-closeComment.active{display:inline-block;}
       @media screen and (max-width: 533px){
          .commentbox .xe_content.hiddenComment{width:75%;}
       }
    </style>

     


서버에 요청 중입니다. 잠시만 기다려 주십시오...