Javascript 更多信息-展开div

我需要一点关于Javascript/HTML中的“更多信息”脚本的帮助

当前代码：

<div id="information">
    Content
    <div id="more_information" style="display:none;">
        More content
    </div>
<a href="#" onclick="showhide('more_information');">More information</a>​​​​​​​​
</div>

干杯

JS:

function showhide(layer_ref) {
  var el = document.getElementById(layer_ref);
  var visible = el.style.display == 'block' // current state
  el.style.display = visible ? 'none' : 'block';
  return !visible; // new state (true=visible,false=invisible)
}

HTML:

​​​​​​​​

我建议使用，这样会更容易：

jQuery("#information a").click(function(){
    jQuery(this).parent().find("#more_information").toggle();
});

---

只有当您只有一个id为“more_information”的DOM元素时，它才会起作用：

如果页面上几乎没有类似的结构，则应使用：

HTML:

<div id="information">
    Content
    <div id="more_information" style="display:none;">
        More content
    </div>
    <a href="#" onclick="showhide(this); return false;">More information</a>​​​​​​​​
</div>

function showhide(node) {
   var moreNode = node.previousSibling, i = 5;
   while (moreNode.nodeType != 1 && i--) {
      moreNode = moreNode.previousSibling;
   }

   if (moreNode && moreNode.nodeType == 1) {
       moreNode.style.display = moreNode.offsetWidth ? 'none' : 'block';
   }
}​

---

你的问题是什么？无论如何，我可以删除“更多信息”一旦点击？或者更好的是，将其转换为“更少的信息”。抱歉，但这不起作用。@Dean下一步请自己调试代码谢谢，是的，我注意到了输入错误；-）这是怎么回事？当您添加了

.parent（）

，单击链接时，它会显示/隐藏div。在那之前，这是行不通的。无论如何，这不是jQuery问题，也不需要jQuery答案。简单的js解决方案足够简单。

function showhide(nodeId) {
   var node = document.getElementById(nodeId);
   if (node) {
       node.style.display = node.offsetWidth ? 'none' : 'block';
   }
}​

<div id="information">
    Content
    <div id="more_information" style="display:none;">
        More content
    </div>
    <a href="#" onclick="showhide(this); return false;">More information</a>​​​​​​​​
</div>

function showhide(node) {
   var moreNode = node.previousSibling, i = 5;
   while (moreNode.nodeType != 1 && i--) {
      moreNode = moreNode.previousSibling;
   }

   if (moreNode && moreNode.nodeType == 1) {
       moreNode.style.display = moreNode.offsetWidth ? 'none' : 'block';
   }
}​