简单设置显示：无/带javascript的块

我有以下代码：

<table>
    <tr class="odd"><td>Entry 1</td></tr>
    <tr class="even clickable" onclick="showHide('sub2')"><td>> Entry 2</td></tr>
    <tr class="even" id="sub2">
        <td><ul><li>Information 1</li><li>Information 2</li></ul></td>
    </tr>
    <tr class="odd"><td>Entry 3</td></tr>
    <tr class="even"><td>Entry 4</td></tr>       
</table>

使用此css：

tr.odd{
    background-color: #dedede;
}

tr.even{
    background-color: #7ea9ff;    
}

tr.clickable{
    cursor: pointer;
}

tr.clickable:hover{
    color: white;
}

tr[id^="sub"]{
    display: none;
}

有人能告诉我为什么它不起作用吗？我正试图用id=“sub2”单击该行时显示/隐藏

---

首先，在您的JSFIDLE示例中，函数被包装到一个domready事件中。您应该将JavaScript的包装更改为无包装体。这可以在左侧栏的第二个下拉列表中设置。否则将无法访问您的函数

然后，JavaScript中的第二行搜索一个ID为的元素——但您的文档不包含任何ID，它包含类

document.getElementById

只能通过其ID查找元素

我建议你使用这个任务。使用jQuery，可以如下方式解决任务：

HTML:

---

运行代码时打开调试控制台，您将收到消息“ReferenceError:showHide未定义”

如果您将html和javascript放在一个文件中并运行，那么这个问题就解决了。它与JSFIDLE处理源代码的顺序有关

其次，您试图通过id获取元素，但给它起类名——这没有意义。通过给元素id并使用它来工作

但这是非常笨拙的，只是用来解释为什么它不起作用。正如raphael所说，最好使用jQuery

编辑：

---

我不知道如何向您解释为什么会发生这种情况，但您需要检查css display属性是否设置为none或为空。因此，这将从第一次触发您的函数，否则它将转到“else”，然后在下一次单击时触发。

因此您需要检查以下条件：

---

如果（el&&el.style.display=='none'| | el.style.display===''）

你能告诉我你想要实现什么吗？会发生什么？你的代码毫无意义。顺便说一句，问这样的问题总是一个坏主意：我有这个（…）出了什么问题…我刚刚意识到，在回答之后，你答案中的代码与JSFIDLE示例不符。。。哪一个是您正在使用的代码？我只是忘了更新JSFIDLE。请你再看一下好吗。我想知道，为什么我必须第一次单击两次才能显示子程序。但是在我上面的问题中，您可以找到一个带有id的表行，而我不想隐藏这个。好的，然后您可以使用

$（“#sub2”）.toggle（）而不是
$（“.偶”）.toggle（）切换元素。它正在工作。我更新了JSFIDLE。我只是想知道为什么我一开始要点击两次。我想这是因为
el.style.display
没有在页面加载时设置。尝试使用style属性设置它：
style=“display:none；”“
（或block）哦，我知道了，我通过CSS设置了display:none。第一次单击时，它被写入tr标记中，第二次klick更改了它。我只是忘记了更新jsfiddle。请你再看一下好吗。我想知道，为什么我要第一次点击2次才能显示子程序。@emjay啊，干得好。您可以单击两次，因为您的元素
display
属性未设置，因此它既不是
none
也不是
block
。如果在javascript中交换
块
和
无
测试，它将按预期工作。也就是说，将所有“无”更改为“块”，反之亦然。
tr.odd{
    background-color: #dedede;
}

tr.even{
    background-color: #7ea9ff;    
}

tr.clickable{
    cursor: pointer;
}

tr.clickable:hover{
    color: white;
}

tr[id^="sub"]{
    display: none;
}

<table>
    <tr class="odd"><td>Product 1</td></tr>
    <tr class="trigger"><td>&gt; Product 2</td></tr>
    <tr class="even"><td>&nbsp;&nbsp; Information 1</td></tr>
    <tr class="even"><td>&nbsp;&nbsp; Information 2</td></tr>
    <tr class="odd"><td>Product 3</td></tr>
    <tr class="even"><td>Product 4</td></tr>       
</table>

$(document).ready(function() {
    $(".trigger").click(function() {
        $(".even").toggle();
    });
});

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.display == 'block')    
        el.style.display = 'none';
    else 
        el.style.display = 'block';
}