用JS控制边框高度

Question

我有两个相互重叠的 Div：#header-menu，下面是 #banner。两者都跨越了#body 的整个宽度。

他们都有a {border-bottom:5px}。但是当#banner 为空时（我只在某些页面上放东西），那么#header-menu 上的border-bottom 将是5px + 距离#banner 边界的5px，这会扼杀设计。

我的问题是如果#banner的高度小于5px，我是否可以通过使用JS和CSS来去掉#banner的边框？如果有，那该怎么做呢？

我在 Drupal 7 上，我可以在 php 中执行，所以当 #banner 为空时会有边框？

Answer 1

这就是你要求做的事情

$(".banner").each(function(){
  if( $(this).height() < 5){
    $(this).remove();
  }
});

或者：

$(".banner").each(function(){
  if( $(this).html() == ''){
    $(this).css('border-bottom', 'none');
  }
});

对于页面上的每个横幅，阅读它的 html。如果 html 为空，则将横幅的 css 边框底部属性设置为无。但是，我建议如果它是空的，它是一个毫无意义的 html 元素，所以最好像这样删除它：

$(".banner").each(function(){
  if( $(this).html() == ''){
    $(this).remove();
  }
});

（这里我使用.banner而不是#banner）

http://codepen.io/EightArmsHQ/pen/qNQwOQ

但是，如果 div 为空，我强烈建议您使用某种服务器端代码来不输出 html。