Question

我有以下HTML：

<span class="day-number">{{day-number}}</span>
<div class="event-box">
  <div class="event-container">
  </div>
  <div class="more-events">more ...</div>
</div>

事件容器中填充了未知数量的.event元素，如下所示：

<div class="event">{{event-name}}</div>

我想根据.more的高度是否超过.event-container（等于堆叠的四个76px元素的高度）来显示或隐藏.event元素

上述元素的样式：

.event {
    text-align: left;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: normal;
    color: whitesmoke;
    padding: 0 1px;
    overflow: hidden;
    margin-bottom: 2px;
    cursor: pointer;
}
.event-box {
    max-height: 76px;
    overflow: hidden;
    position:relative;
}
.event-box .more-events {
    height: 10px;
    position: absolute;
    right: 0;
    bottom: 10px;
    display: none;
    z-index: 5;
}

.event-container

没有样式

我可以用Javascript（jQuery）做我想要的事情：

$(".event-box").each(function(){
    var $this = $(this);
    if($this.children(".event-container").height() > 76){
        $this.children(".more-events").css("display", "block");
    } else {
        $this.children(".more-events").css("display", "");
    }
});

每次做出改变时都要运行，但我宁愿用CSS做。

这可能吗？也许使用伪元素或媒体查询或什么？

JSFIDDLE：http://jsfiddle.net/pitaj/LjLxuhx2/

Answer 1

如果更改标记是可以接受的，那么有可能在不使用JavaScript来显示或隐藏的情况下实现看似相似的页面，这里是Fiddle

我已移除<div class="more-events">more ...</div>行，并将event类的元素设置为在必要时隐藏我还将其悬停在more ...上时显示。

我添加的CSS：

.event:nth-child(n){
    display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
    display: block;
}
.event:nth-child(5){
    text-indent: -9999px; 
    position: relative;
    display: block;
    color: black;
    border: none;
    background-color: #FFF;
}
.event:nth-child(5)::before{
    position: absolute;    
    text-indent: 0px; 
    content: "more ...";
    display: block;
}
.event:nth-child(5):hover{
    position: static;
    text-indent: 0; 
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    color: whitesmoke;        
}
.event:nth-child(5):hover::before{
    display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
    display: block;
}

对于.event-box课程，我已评论max-height: 76px;，因为在我的浏览器中，76px不等于堆叠的四个.event元素的高度。还删除了update函数。

Answer 2

我认为只使用css是可能的。但是为了更好地处理你想要做的事情。而不是使用max-height来.event-box我使用这个css，它会在事件容器上添加display:none到+ 4.event：

.event-box .event-container .event:nth-child(n+5){
    display: none;
}

现在当它超过4时，会出现更多文字。的 FIDDLE

<强>更新

HERE我对你的js做了一些改变，并使其更专业，

Answer 3

当您使用模板渲染页面时，也许您可以按照以下步骤进行操作

<div class="event-container">
{{#each events}}
  <div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}

和

function canshowmore() {
  return events.length >= 4;
}

如果另一个元素高于某个高度，则显示一个元素

3 个答案: