如何在我的情况下正确显示/隐藏按钮？-Java 学习之路

我正在尝试为我的应用程序构建一个“显示更多”按钮，我遇到了一个问题 .

当用户点击阅读更多按钮时，我有一个指令来做东西

(function(window, angular) {
    var app = angular.module('myApp');
    app.directive('readMore', [
        function() {
            return {
                restrict: 'A',
                template:'<a class="read-more-button"></a>',
                link: function(scope, element) {                        
                    element.bind('click', function(){
                        // do stuff
                    })  
                }
            };
        }
    ]);
})(window, angular);

HTML

<div id="container">
    <div ng-repeat="item in items">
        {{item.description}}
    </div>
</div>
<a ng-show="items.length > 10" read-more href="#"></a>
//only show read more button when I have more than 10 items

CSS：

#container {
    height: 250px;
    overflow: hidden;
}

问题有时是单个 item.description 有长文本而我的 #container div只能容纳8个项目并且休息是隐藏的 . 我不是不切实际的 . 有没有什么办法解决这一问题？谢谢您的帮助！

Update:

所需的结果将是：当单击“读取更多”按钮时，div大小将扩展为应有的大小 . 目前，仅当应用程序有> 10个项目时，才会显示更多阅读按钮 . 我的问题是当8个项目文本已经填充250px div时如何正确显示/隐藏读取更多按钮但是我实际上有9个项目（所以它应该显示更多按钮但是因为它只有9个项目，所以读取更多按钮将不显示 . ）

底线是：当#container div充满文本时我需要知道何时显示更多按钮，无论我有多少项目

2 回答

0
我认为我们需要讨论你的CSS
```
#container {
height: 250px;
overflow: hidden;}
```
这意味着你想要将高度固定为250px，如果#container中的conntent高度超过250px，那么它将隐藏冗余部分 .

所以有时一个item.description有长文本，你只看到8或7或6项，这是正确的 .

也许有两种方法可以做：
- 如果要将高度固定为250px . 你可以改变 overflow: hidden ;到 overflow:scroll ;您将看到所有10个项目，但div有滚动 .
- 如果您不想将高度固定为250px . 你可以改为
“的#container {高度：汽车;溢出：可见;}

希望能帮助到你 .
回复于 2024-04-24T00:09:17+08:00
0

让我正确地提出您的问题，您希望能够检测固定宽度div的内容是否填充或溢出div（无论内容的数量，因为它们可能具有不同的大小），如果是，则显示更多按钮？

如果是这样检查这个线程，它有同样的问题，有一个示例javascript片段进行检查，你可以适应你的角度指令上面：

javascript css check if overflow

回复于 2024-04-24T00:09:17+08:00

如何在我的情况下正确显示/隐藏按钮？

2 回答

相关问题