如何在父div中隐藏/显示div

Question

我在一个网站上工作，我需要为网站的一部分提供基本的显示隐藏功能，其中，当用户单击主题标题时，它会在主题标题下方显示一个无序列表，然后当他们单击主题标题时再次，它将再次隐藏内容。

我过去曾经这样做过，但是当我尝试将代码应用到我正在工作的站点时，它不起作用....隐藏的内容不会显示。

当前，我正在使用javascript，但是如果有更好的方法（也许使用纯CSS），那对我也很好。

这是我现在正在尝试的代码（由于父/子div的情况，我感觉它无法正常工作，但是我不确定，所以我希望有人可以将我引向正确的方向：

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="toggle-buttons">
    <div class="web-develop-toggle">
        <a href="#" onClick="toggle-web-develop('web-develop-content',this)">
            <img src="images/subCtxHeader3-c.png" class="img-responsive" border="0">
        </a>
    </div>
    <div class="web-develop-content" style="display: none;">
        <div class="web-develop-body">
            <ul class="svc-list">
            <li class="svc-bullet"><span class="svc-list">Option 1</span></li>
            <li class="svc-bullet"><span class="svc-list">Option 2</span></li>
            <li class="svc-bullet"><span class="svc-list">Option 3</span></li>
            <li class="svc-bullet"><span class="svc-list">Option 4</span></li>
        </ul>
        </div>
    </div>
</div>
</div>
</div>
</div>

这是我目前正在使用的javascript，在过去对我有用，具有讽刺意味的是：

<script type="text/javascript">

function toggle-web-develop(id, link) {

    var e = document.getElementById(id);

    if (e.style.display == '') {
        e.style.display = 'none';
    } else {
        e.style.display = '';
    }
}

</script>

由于我一整天都坚持不懈，所以任何帮助都将受到欢迎。 提前致谢！

-丹

Answer 1

您不能在函数名称中使用- 。 尝试类似toggleWebDevelop()

您正在尝试通过ID查找web-develop-content ，但是您将其用作HTML中的类

<div class="web-develop-content" style="display: none;">

应该...

<div id="web-develop-content" style="display: none;">

另外，我将使用e.style.display = 'block'; 而不是e.style.display = '';

演示