我無法消失圖像後，我關閉div

工作的每件事情很好，但div.closed {display：none;}不工作。當我關閉div但書圖像仍然顯示正確的浮動。我正在嘗試修復它，但當我關閉div時，它仍然顯示爲右側。當我點擊Murach的HTML5和CSS3或列表的任何其他標題時，我試圖使其消失。這裏是代碼。我想讓yu找出我犯錯的地方，否則你也可能會發布更新。等待你的指導代碼在這裏我無法消失圖像後，我關閉div

<!DOCTYPE html> 
<html> 
<head><title>FAQs</title> 
<script> 
window.onload = function() { 
var faqs = document.getElementById("faqs"); 
var h2Elements = faqs.getElementsByTagName("h2"); 
var h2Node; 
for (var i = 0; i < h2Elements.length; i++) { 
h2Node = h2Elements[i]; 
// Attach event handler 
h2Node.onclick = function() { 
var h2 = this; // h2 is the current h2Node object 
if (h2.getAttribute("class") == "plus") 
h2.setAttribute("class", "minus"); 
else 
h2.setAttribute("class", "plus"); 
if (h2.nextElementSibling.getAttribute("class") == "closed") 
h2.nextElementSibling.setAttribute("class", "open"); 
else 
h2.nextElementSibling.setAttribute("class", "closed"); 
} 
} 
} 
</script> 
<script> 
function changeIt (file) { 
document.querySelector('.book-image img').setAttribute("src", file); 
} 
</script> 
<style> 
body { font-family: Verdana, Arial, sans-serif; width: 1280px; margin: 0 
auto; border: 3px solid blue; margin-top: 30px; } 
section { padding: 15px 25px; border: 2px solid green;} 
h1 {font-size: 150%;} 
h2 { font-size: 120%; padding: .25em 0 .25em 25px; cursor: pointer; } 
h2.plus { background: url(images/plus.png) no-repeat left center; } 
h2.minus { background: url(images/minus.png) no-repeat left center; } 
ul { padding-left: 45px; } 
li { padding-bottom: .25em; } 
p { padding-bottom: .25em; padding-left: 25px; } 
div.closed { img-display: none;} 
div.open { display: block;} 
.book-image img { float: right; width: 20%; } 
</style>  
</head> 
<body> 
<section id="faqs"> 
<div class="book-image"><img src="#"></div> 
<h1 style="color:Blue;">Murach products</h1> 
<h2 class="plus">Books for web developers</h2> 
<div class="closed"> 
<a href="#" id="1" onclick="changeIt('images/pic1_1.jpg'); return false;"> 
<p>Murach's HTML5 and CSS3</p></a> 
<a href="#" id="2" onclick="changeIt('images/pic1_2.jpg'); 
return false;"><p>Murach's javascripting and DOM scripting</p></a> 
<a href="#" id="3" onclick="changeIt('images/pic1_3.jpg'); return false;"> 
<p>Murach's PHP and MYSQL</p></a> 
<a href="#" id="4" onclick="changeIt('images/pic1_4.jpg');return false;"> 
<p>Murach's MYSQL</p></a> 
</div> 
<h2 class="plus">Books for Java developers</h2> 
<div class="closed"> 
<a href="#" id="1" onclick="changeIt('images/pic2_1.jpg'); return false;"> 
<p>Murach's Java Programming</p></a> 
<a href="#" id="2" onclick="changeIt('images/pic2_2.jpg'); return false;"> 
<p>Murach's Java Servlets and JSP</p></a> 
<a href="#" id="3" onclick="changeIt('images/pic2_3.jpg'); return false;"> 
<p>Murach's Oracle SQL and PL/SQL</p></a> 
</div> 
<h2 class="plus">Books for .Net developers</h2> 
<div class="closed"> 
<a href="#" id="1" onclick="changeIt('images/pic3_1.jpg'); return false;"> 
<p>C# 2010</p></a> 
<a href="#" id="2" onclick="changeIt('images/pic3_2.jpg'); return false;"> 
<p>ASP.NET for Web Programming with C# 2010</p></a> 
<a href="#" id="3" onclick="changeIt('images/pic3_3.jpg'); return false;"> 
<p>Visual Basic 2010</p></a> 
<a href="#" id="4" onclick="changeIt('images/pic3_4.jpg'); return false;"> 
<p>ASP.NET for Web Programming with VB 2010</p></a> 
<a href="#" id="4" onclick="changeIt('images/pic3_5.jpg'); return false;"> 
<p>SQL Server 2012</p></a> 
</div> 
</section> 
</body> 
</html>

來源

2017-10-08 Engr Bilawal Malik

你的代碼已經

div.closed { img-display: none;}

（IMG-顯示犯規存在）

將其更改爲

div.closed { display: none; }

如果不工作，

div.closed { display: none !important; }

來源

2017-10-08 07:19:40

仍然無法正常工作。我是gona分享你與jsfidder的鏈接 –

我無法消失圖像後，我關閉div

回答

相關問題