Высота контрольной границы с JS

Question

У меня есть два divs друг на друга: #header-menu и ниже #banner. Оба охватывают всю ширину #body.

Оба они имеют a {border-bottom:5px}. Но когда #banner пуст (я только помещаю вещи в него на определенные страницы), то border-bottom на #header-menu будет 5px + 5px с границы #banner, и это убьет дизайн.

Мой вопрос: если я с помощью JS и CSS может забрать границу #banner, если #banner меньше, чем 5px heigh? Если да, то как это сделать?

Я нахожусь на 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 border-bottom баннера значение none. Тем не менее, я хотел бы предложить, что если его пустым, его бессмысленно HTML элемент, так что лучше было бы удалить его, как это:

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

(здесь я использовал .banner, а не #banner)

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

Однако я настоятельно призываю вас использовать какой-то код на стороне сервера, чтобы просто не выводить html, если div будет пустым.