Question

如果没有更多要查看的文字，我需要“看到更多”按钮才能消失。我认为最好的方法是进行字符计数，并在文本接近365px容器高度时大致计算出来。

有没有人有建议和最好编辑脚本以引入字符规则？

    $("[id^=infopanelcollapse]").click(function() {
        $(this).toggleClass("btn-more");
        $(this).prev().toggleClass("expand");
    });

        $("[id^=infopanelcollapse]").click(function() {
            $(this).toggleClass("btn-more");
            $(this).prev().toggleClass("expand");
        });

.product-overflow {
  max-height: 365px;
  min-height: 365px;
  overflow: hidden;
  position: relative;
}
.product-overflow.expand {
  max-height: none;
  height: auto;
  overflow: hidden;
}
.expand-button .less, .expand-button.btn-more .more {
  display: none;
}
.expand-button .more, .expand-button.btn-more .less {
  display: block;
}
.expand-button {
text-align:center;
text-decoration:underline;
cursor:pointer;
}
.product-overflow:before {
  content: "\00a0";
  height: 120px;
  width: 100%;
  position: absolute;
  display: block;
  bottom: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.product-overflow.expand:before {
  height: 0;
}

<div class="row product-overflow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor lacinia, bibendum nunc non, auctor ipsum. Quisque non placerat mauris, efficitur interdum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac risus eu ante rhoncus fringilla in vel dui. Pellentesque felis libero, mollis sit amet faucibus eget, placerat eu nibh. Curabitur auctor eget nisl eu faucibus. Aenean id elementum mi, ac maximus eros. Aenean bibendum felis vitae metus dictum cursus. Praesent ac nisl eros. Proin mi justo, molestie a leo vel, facilisis vehicula quam. In euismod pulvinar dignissim. Ut iaculis nulla vel lacinia dapibus. Maecenas quis ex ut purus facilisis mattis et in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor lacinia, bibendum nunc non, auctor ipsum. Quisque non placerat mauris, efficitur interdum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac risus eu ante rhoncus fringilla in vel dui. Pellentesque felis libero, mollis sit amet faucibus eget, placerat eu nibh. Curabitur auctor eget nisl eu faucibus. Aenean id elementum mi, ac maximus eros. Aenean bibendum felis vitae metus dictum cursus. Praesent ac nisl eros. Proin mi justo, molestie a leo vel, facilisis vehicula quam. In euismod pulvinar dignissim. Ut iaculis nulla vel lacinia dapibus. Maecenas quis ex ut purus facilisis mattis et in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
</div>

<div id="infopanelcollapse" class="expand-button text-center"><span class="more">See more <span class="halflings chevron-down"></span></span><span class="less">See less <span class="halflings chevron-up"></span></span></div>

干杯队员 JSFiddle

Answer 1

添加隐藏的类，并在需要时添加或删除：

https://jsfiddle.net/otjjffmc/2/

<fields>
    <!-- Other Fields -->
    <title>
         <label>Title</label>
         <label>Title</label>                                
         <frontend_type>text</frontend_type>                 
         <sort_order>10</sort_order>                         
         <show_in_default>1</show_in_default>                
         <show_in_website>1</show_in_website>                
         <show_in_store>1</show_in_store>                    
    </title>
    <!-- Other Fields -->
</fields>

显示的字符数限制或内容高度限制更少见

1 个答案: