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

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

我已经完成了这个过去，但是当我尝试将我的代码应用到我正在处理的网站时，它不起作用....隐藏的内容不显示。

目前，我正在使用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>

任何和所有帮助将大大欢迎我一整天都陷在这里。谢谢提前！

- 丹

来源

2014-02-07 DanAdams

由于您需要更改onclick，因此您将别无选择，只能使用JavaScript。 – crush

我在这里看到的一个问题是，你的函数名中有'-'。这不是函数名称的合法字符。 – crush

看看jquery和动画 – Dwza

在函数名称不能使用-。尝试类似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

来源

2014-02-07 18:48:43 Schmalzy

这就是它！真棒！我必须更改函数的名称，然后将类更改为一个ID，并从那里顺利航行。谢谢你，谢谢！ – DanAdams

有没有人可以给我一个如何用jQuery做动画的例子？我对jQuery不太熟悉，但我很想学习这些功能。 – DanAdams

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

回答

相关问题