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 = '';

DEMO

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

1 个答案: