Question

我有一个Div，如果它高于68px，我希望它隐藏剩下的内容并显示一个扩展它的选项。

问题是我不知道如何检测div何时高于68px。特别是因为div是敏感的。

我尝试用PHP计算字符数，并根据字符数显示展开按钮。但是这种技术非常不经常，因为有些角色比其他角色更广泛。

这是我尝试解决此问题的网站：http://www.metagame.gg/champions/azir#comp

正如您所知，它是响应性的，因此这使问题更难。中间盒子＆＃34; Weak Against＆＃34;不需要扩展。

这是一张图片：

我正在尝试使用JavaScript / CSS / HTML找到解决方案

非常感谢您提前

Answer 1

我建议使用jQuery来查看css类的width属性。

关于响应的div：

在你的css中，当在较小的屏幕上（最大宽度：980px）时盒子的宽度是100％，当屏幕＆gt;时盒子的宽度是100％。 1300px宽是32.8％。因此，您可以编写一个脚本来查看width属性并相应地执行操作，即如果宽度为32.8％，则检查高度并应用逻辑，如果高度大于所需（see article here）。

关于寻找身高：

应用高度就像其他人所说的那样，查看div的height属性。如果它大于您想要的最大高度，则应用所需的css。

关于阅读更多：

看一下这个例子：

它本质上正在做的是你在PHP中尝试做什么，它查看字符数，并说明是否还没有点击读取，然后在最后一个最大字符后拆分文本，然后放入其余的文本隐藏在一个隐藏的范围内。

如果按下更多内容，则显示隐藏跨度内的所有文本以及已显示的文本。

http://codepen.io/maxds/pen/jgeoA/

这是codepen的代码：

<html>
  <head>
    <title>jQuery Read More/Less Toggle Example</title>
    <style>
    .morecontent span {
        display: none;
    }
    .morelink {
       display: block;
    }
   </style>
  </head>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>
    <script type="text/javascript">
     $(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";


    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
    </script>
  </body>
</html>

Answer 2

你可以用jQuery做到这一点：

jQuery('.expandClicker').each(function(){
  if (jQuery(this).parent().height() < 68) {
    jQuery(this).fadeOut();
  }
});

我在你的页面上试了一下，似乎工作得很好......

您也可以将fadeOut();替换为：

jQuery(this).css({'display':'none'});

Answer 3

首先，我建议您不要使用每个单元格只有一行和一列的表格，如屏幕截图所示。

我建议用另外的div（内包装）包装文本，并在外包装上使用max-width。通过JS，您可以比较内包装器高度是否大于外包装器（max-）高度。如果为正，则向您的外包装添加一个类。这个课程会触发你的阅读更多信息＆＃34;链接。

我不会提供jsFiddle或任何代码，因为您没有提供任何源代码来处理。我不想使用链接页面上的开发者工具在jsFiddle中重新创建您的页面。

根据div高度显示展开/折叠按钮

3 个答案: