0

我的设计中有一个右侧边栏，如果有的话，它可以动态地引入推荐。

HTML 看起来像：

<h4> dynamic content</h4>

这是我的CSS：

#testimonials {
    background: #eeeeee; 
    padding: 30px; 
    width: auto; 
    height: auto;
}

#testimonials h4{
    font-size: 20px;
    line-height: 30px;
    font-family: "freight-big-pro";
    font-style: italic; 
    border-bottom: 1px solid #666; 
    padding-bottom: 20px; 
    padding-top: 20px;
}

#testimonials h4 strong{
    display: block; 
    font-family:"freight-sans-pro", sans-serif; 
    font-style: normal; 
    font-size: 12px; 
}

问题是当<h4>元素中没有内容时，样式仍在被拾取并添加 CSS 中指定的背景和边框。我假设它正在生成h4。如果没有任何内容，有没有办法让它为空？

更新：

我正在尝试这个，它似乎在 jsfiddle 中工作，但不在文件中：

<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>

我认为它会将内部的 HTML 视为文本。

4

4 回答 4

2

更新

这是另一个JsFiddle，但这也可能不适用于 OP，因为它使用 jQuery。

jQuery

//onload:
checkStyle();   

//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
    if ($('#testimonials h4').is(':empty')) 
        $('#testimonials').hide();
    else 
        $('#testimonials').show();    
}

这不一定适用于提问者正在寻找的内容，但可能对未来的读者有益。这是为了不设计 h4，而不是 op 想要的父 div。

假设你对 CSS3 没问题，并且<h4>实际上是空的，你可以修改你的 CSS 以使用:not和:empty选择器。

CSS

#testimonials h4:not(:empty) {
    font-size: 20px;
    line-height: 30px;
    font-family:"freight-big-pro";
    font-style: italic;
    border-bottom: 1px solid #666;
    padding-bottom: 20px;
    padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
    display: block;
    font-family:"freight-sans-pro", sans-serif;
    font-style: normal;
    font-size: 12px;
}

这是一个JsFiddle. 您可以将内容添加到 h4 以查看其工作原理。

或者，你甚至可以做相反的事情，并有一个display:none;for empty <h4>s：

#testimonials h4:empty{
    display:none;
}
于 2013-08-13T18:51:58.730 回答
1

在你的 CSS 中提供#testimonials一个属性；display: none;然后，就在您用于提取推荐的任何 Javascript 代码完成运行之前，让它检查它是否实际检索到任何内容，如果是，display: block;则设置#testimonials。

有些相关：在 Stack Overflow 上提问时，最好发布尽可能多的信息，例如您用于动态检索推荐的代码——问题中提到了它，它的行为会影响您所询问的内容，这使它在范围内。如果您将使用您的推荐检索代码更新您的问题，我将更新我的答案以显示特定的解决方案。

于 2013-08-13T18:51:31.470 回答
1

当没有内容时，最初在您的 css 上显示：无。使用 javascript 或 jquery 显示内容。显示内容时将应用样式。

最初没有内容时： #testimonials { background: #eeeeee; padding: 30px; width: auto; height: auto; display :none; }

当内容被动态生成时，使用： $("#testimonials").show();

于 2013-08-13T18:54:01.507 回答
1

当不需要时，这似乎是很多前端工作。如果您能够将内容输出到 h4 中，那么您就可以输出和附加标签。

<section id="testimonials"></section>

服务器端推出：

<h4>all my content</h4>

然后你的 CSS 将在没有 js 的任何工作的情况下工作。

很可能每个推荐都有一个？

于 2013-08-13T20:06:08.490 回答