根據 div 高度顯示展開/折疊按鈕

Question

我有一個 Div，如果它高於 68px，我希望它隱藏其余內容並顯示一個選項來擴展它。

問題是我不知道如何檢測 div 何時高於 68px。 特別是因為 div 是響應式的。

我試圖用 PHP 計算字符數，並根據字符數顯示展開按鈕。 但是這種技術非常不精確，因為有些字符比其他字符寬。

這是我試圖解決這個問題的網站： http : //www.metagame.gg/champions/azir#comp

正如您所理解的，它是響應式的，因此這使問題變得更加困難。 中間的“弱對抗”框不需要展開。

這是一張圖片：

我正在嘗試使用 JavaScript / CSS / HTML 找到解決方案

非常感謝您提前

Answer 1

我建議使用 jQuery 來查看 css 類的 width 屬性。

關於 div 響應：

在你的 css 中，在較小的屏幕（max-width: 980px）上框的寬度是 100%，當屏幕 > 1300px 寬時框的寬度是 32.8%。 因此，您可以編寫一個腳本來查看 width 屬性並采取相應的行動，即如果寬度為 32.8%，則檢查高度並應用邏輯以判斷高度是否大於預期（請參閱此處的文章）。

關於找到高度：

應用高度就像其他人所說的，查看div的高度屬性的情況。 如果它大於您所需的最大高度，則應用所需的 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-) 高度。 如果是肯定的，則向您的外部包裝器添加一個類。 此類觸發“閱讀更多”鏈接的可見性。

我不會提供 jsFiddle 或任何代碼，因為您沒有提供任何源代碼來處理。 而且我不想在鏈接頁面上使用開發人員工具在 jsFiddle 中重新創建您的頁面。

根據 div 高度顯示展開/折疊按鈕

問題描述

3 個解決方案

解決方案1
2 2016-04-20 08:34:32

解決方案2
1 已采納 2016-04-20 08:03:53

解決方案3
1 2016-04-20 08:06:53

根據 div 高度顯示展開/折疊按鈕

問題描述

3 個解決方案

解決方案1 2 2016-04-20 08:34:32

解決方案2 1 已采納 2016-04-20 08:03:53

解決方案3 1 2016-04-20 08:06:53

解決方案1
2 2016-04-20 08:34:32

解決方案2
1 已采納 2016-04-20 08:03:53

解決方案3
1 2016-04-20 08:06:53