Цвет фона не применяется после изменения видимости

Question

Цвет розового цвета исчезает после изменения видимости контейнера ul tag. Коды следующие. Я что-то пропустил ? Почему li не наследует цвет фона тега ul?

<style type="text/css"> 
.div_r3r4_container { width:760px; background-color:lightblue; } 
.div_r3_class  { margin-left:132px; width:630px; } 
.ul_r3hz_class { background-color:pink; font-size:0px; padding:2px 2px 1px 3px;list-style:none;margin:0;  } 
.li_r3hz_class { font-size:14px; color:black; display:inline; } 
.ul_r4hz_class {background-color:yellow; font-size:0px; border:1px solid red; padding:1px 2px 2px 3px;list-style:none;margin:0; } 
.li_r4hz_class {font-size:14px; color:green; display:inline; } 

</style> 



<div id="div_r3_r4_id" class="div_r3r4_container"> 
    <label id="city"> hide and show ul </label> 

    <div class="div_r3_class" > 
     <ul class="ul_r3hz_class" id="sid" > 
      <li class="li_r3hz_class"> aaaa, aaaa1, aaa2, aaa3,  </li> 
      <li class="li_r3hz_class"> aaaaa4, aaaa5, aaaa5, aaa6, </li> 
     </ul> 
    </div>   

     <div class="div_r4_class" > 
     <ul class="ul_r4hz_class" > 
      <li class="li_r4hz_class"> bb, bbb, bbbb, bbbb2, bbbb3 </li> 
      <li class="li_r4hz_class"> bbbb5, bbb6, bbb7, bbb8, </li> 
     </ul> 
    </div>   

</div> 



<div> 
<input id="minus" value="-" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="hide_show_div('sid', 'minus', 'plus'); return flase; "> 
<input id="plus" value="+" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="show_hide_div('sid', 'minus','plus','div_r3_class'); return flase; "> 

</div> 


<script language = "JavaScript"> 

function hide_show_div(hideid1, hideid2, showid1){ 
    hideObjDiv(hideid1) ; 
    hideObjDiv(hideid2) ; 
    showObjDiv(showid1) ; 
} 

function show_hide_div(showdivid1, showid2, hideid1, newclass){ 
    hideObjDiv(hideid1) ; 
    showObjDiv(showid2) ; 
    showObjDiv(showdivid1) ; 
} 
function hideObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'hidden'; 
     document.getElementById(obj).style.display = 'none'; 
    } 
} 

function showObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'visible'; 
     document.getElementById(obj).style.display = 'inline'; 
    } 
} 
</script> 

Answer 1

Я нашел проблему в вашем javascript-коде. Как вы знаете, неупорядоченный тег списка должен быть блочным по умолчанию, и вы пытаетесь сделать его встроенным в свой js-код (после скрытия). Просто попробуйте изменить функцию showObjDiv на что-то вроде этого:

function showObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'visible'; 
     document.getElementById(obj).style.display = 'block'; 
    } 
} 

Он должен работать нормально после этого.

Answer 2

Существует разница между настройкой видимости: скрытый и дисплей: нет. когда вы установили дисплей: none элемент будет полностью удален из потока, и этот элемент вместе со всеми его атрибутами и стилями будет удален. Если OBJ элемент имеет класс CSS * div_r3_class *, то (для простоты я использовал JQuery):

function showObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'visible'; 
     document.getElementById(obj).style.display = 'inline'; 
     $("#"+obj).addClass('div_r3_class'); 
    } 

Таким образом, после повторного отображения элемента, указанный класс будет прикреплен к нему ,