点击另一个时关闭扰流板

Question

我有这个剧透代码：

<style type="text/css">
body,input
    {
    font-family:"Trebuchet ms",arial;font-size:0.9em;
    color:#333;
    }
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style>
    <script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="http://i.imgur.com/AZrcfcR.png" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>

我真的不知道如何解释，但是当有另一个扰流板被打开（点击）时，有没有办法让扰流板关闭？

Answer 1

在此之前尝试隐藏所有扰流板以显示。

试试这个：

function showSpoiler(obj)
{
   var elements  = document.getElementsByClassName('spoiler');

   for(i in elements ){
     elements[i].style.display = "none";
   }

   var inner = obj.parentNode.getElementsByTagName("div")[0];   
   inner.style.display = "";
}