JavaScript 显示/隐藏 div 未打开答案

【问题标题】：JavaScript Show/Hide Div not OpeningJavaScript 显示/隐藏 div 未打开
【发布时间】：2014-03-19 16:13:54
【问题描述】：

我正在使用 PHP while 循环来显示表中的所有行。每行都有一个标题和描述。我正在尝试制作一个标题列表，每个标题都有一个链接。当链接打开时，我试图让一个 div 出现，显示 div 内的标题和描述。我的问题是点击链接时没有出现 div。

编辑：我现在使用答案的 JSFiddle 作为我的代码，它利用了 jQuery。然而，这段代码仍然没有打开 div。

这是我的完整页面代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.light, .fade {
    display: none;
}
</style>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div id="noticeboard">
    <ul>
    <li><a href = "javascript:void(0)" class="clicklinkshow">title</a>
        <div class="light white_content">light<br /><br />description<a href = "javascript:void(0)" class="clicklinkhide">Close</a></div>
        <div class="fade black_overlay">fade</div>
    </li>
    <li><a href = "javascript:void(0)" class="clicklinkshow">title</a>
        <div class="light white_content">light<br /><br />description<a href = "javascript:void(0)" class="clicklinkhide">Close</a></div>
        <div class="fade black_overlay">fade</div>
    </li>
    </ul>
    <script>
    $('.clicklinkshow').click(function() {
    $(this.parentNode).find('.light, .fade').show();
});

$('.clicklinkhide').click(function() {
    $(this.parentNode.parentNode).find('.light, .fade').hide();
});
</script>
</body>
</html>

感谢您的帮助。非常感谢所有帮助。

【问题讨论】：

getElementsByClassName 返回一个 HTMLCollection，它是一个类似数组的对象，而不是单个元素。
嗯，有多个链接被排列，所以会有多个元素具有相同的类名。
但是元素的集合并没有实现与元素相同的接口。
我明白了，谢谢你的两分钱。

标签： javascript php css html

【解决方案1】：

Javascript：

// show
[].forEach.call(document.getElementsByClassName('light'), function(el) {
 el.style.display='block'; 
});

// hide
[].forEach.call(document.getElementsByClassName('light'), function(el) {
 el.style.display='none'; 
});

jquery：

$('.light').show();
$('.light').hide();

【讨论】：

还是不行。我已将问题中的代码更新为我目前拥有的代码。
不能同时使用，需要将这段代码封装在一个函数中，然后在onclick事件中调用这个函数
jsfiddle 仅使用 javascript 和内联事件（已弃用）：jsfiddle.net/4f2SB
当我在我的页面上使用它时，由于某种原因，Jquery 无法正常工作。 div没有出现。我会看看我是否遗漏了什么，JavaScript 版本对我有用，虽然我不会使用它，因为正如你所说，它已被弃用。
仅不推荐使用内联 onclick 或使用 element.addEventListener('click', function() { ... }, false); 来添加它们；