更改可见性后背景颜色不适用

更改容器ul标签的可见性后，粉红色背景颜色消失。代码如下。我错过了什么？为什么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>

来源

2013-09-26 user2818066

你能指定你正在隐藏的是哪个元素吗？ – Jazcash

只需点击“ - ”，你会看到粉红色的aaaa文字消失。然后点击“+”它会回来，但背景颜色是错误的。 – user2818066

我在您的JavaScript代码中发现了一个问题。如您所知，无序列表标记应该默认为阻止状态，并且您试图将其内联到您的js代码中（隐藏后）。只是试图改变你的showObjDiv功能是这样的：

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

它应该工作得很好之后。

来源

2013-09-26 06:19:33 Soulwish

我会试试看。谢谢。 – user2818066

另外，请修复返程; （看起来像一个错字）在你的HTML部分。 – Soulwish

设置可见性：隐藏和显示：无有区别。当您设置display：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'); 
    }

以这种方式重新显示元件之后，所指定的类将被连接到其。

来源

2013-09-26 07:18:27 Drupalist

更改可见性后背景颜色不适用

回答

相关问题