Question

当我点击标签上方的显示/隐藏按钮时，它可以正常工作。但对于下面的按钮（正面已满），它不会隐藏标签的内容。如果我将按钮移动到开始标记上方，它将起作用。如何将其链接到上方的隐藏标签？

<input type="button" onclick="show(this);" value="show"/>
<input type="button" onclick="hide(this);" value="hide"/>

<hide class="inner" style="display.none;">
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" />

<div1 class="inner" style="display:none;">
    <ul>
        <input type="button" onclick="hide(this);" value="Front full"/>
        <li>Double Front</li>
        <li>Aerial Twist</li>
    </ul>
</div1>
</hide>

JS

function show(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("hide")[0];
        inner.style.display = "";
    }


function hide(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("hide")[0];
        inner.style.display = "none";
    }

Answer 1

你不能为两个按钮提供相同的hide()功能，因为它的功能非常具体，因为它隐藏了什么。你为什么不尝试这样的事情：

function hideParent(obj)
    {
    var inner = obj.parentNode.parentNode;
        inner.style.display = "none";
    }


<hide class="inner" style="display.none;">
...
<div1 class="inner" style="display:none;"> // <- assuming this is what this supposed to nbe hidden
    <ul>
        <input type="button" onclick="hideParent(this);" value="Front full"/>
        <li>Double Front</li>
        <li>Aerial Twist</li>
    </ul>
</div1>
</hide>

如果所有按钮都应该隐藏相同的东西 - <hide>元素则执行以下操作：

function hide(obj)
    {
        var inner = getElementbyTagName("body").getElementsByTagName("hide")[0];
        inner.style.display = "none";
    }

与其他评论建议一样，请勿使用<hide>只使用<div>然后使用getElementById

Answer 2

您的hide和show函数会查找作为按钮父级子项的hide标记，即按钮的兄弟。按钮的父级是div，div的父级是隐藏。

如果您希望该按钮影响包含该按钮的隐藏元素，请尝试hide(this.parentNode.parentNode)

或者，您可以将隐藏/显示函数更改为在DOM层次结构中逐步迭代，直到找到隐藏元素，因此它将适用于父级的兄弟姐妹，父母和兄弟姐妹。也许是这样的事情：

function hide(obj)
  {
   if (obj !== document)
   {
     var parent = obj.parentNode;
     var inner = parent.getElementsByTagName("hide");
     if (inner.length > 0) 
     {
       inner[0].style.disply = "none";
     } else {
       hide(parent)
     }
   } 
  }

Answer 3

在下面的按钮中，您有：

<div1 class="inner" style="display:none;">
    <ul>
        <input type="button" onclick="hide(this);" value="Front full"/>
        <li>Double Front</li>

然后在函数中：

function show(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("hide")[0];

因此，当您单击按钮时， obj 是对按钮的引用。它的父节点将是将通过纠错插入的LI（因为按钮不能是UL元素的子节点）。那个父节点没有孩子＆＃34;隐藏＆＃34;元件。

即使按钮是UL的孩子，它也没有任何隐藏孩子。请考虑一下：

var inner = document.getElementsByTagName("hide")[0];

点击按钮后设置“display：none”

3 个答案: