Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/395.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在父div中隐藏/显示div_Javascript_Css_Show Hide - Fatal编程技术网

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

Javascript 如何在父div中隐藏/显示div,javascript,css,show-hide,Javascript,Css,Show Hide,我在一个网站上工作,我需要有一个基本的显示隐藏功能的一部分,其中,当用户点击主题标题,它会显示一个无序的列表下方的主题标题,然后当他们再次点击主题标题,它会再次隐藏内容 我以前也这样做过,但当我尝试将代码应用到我正在工作的站点时,它不起作用……隐藏的内容不会显示 目前,我正在使用javascript,但如果有更好的方法,也许是纯CSS,我也可以 下面是我现在正在尝试的代码(我感觉由于父/子div的情况,它不起作用,但我不确定,因此我希望有人能将我引向正确的方向: <div class="c

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

我以前也这样做过,但当我尝试将代码应用到我正在工作的站点时,它不起作用……隐藏的内容不会显示

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

    选项1 选项2 选项3 选项4
这是我目前使用的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>

功能切换web开发(id、链接){
var e=document.getElementById(id);
如果(e.style.display==''){
e、 style.display='none';
}否则{
e、 style.display='';
}
}
任何和所有的帮助都将受到极大的欢迎,因为我已经在这方面坚持了一整天。 提前谢谢


--Dan

不能在函数名中使用
-
。请尝试类似于
切换WebDevelop()

您试图按id查找
web开发内容
,但您将其用作HTML中的一个类

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

应该是

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

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


因为你需要更改onclick,你将别无选择,只能使用JavaScript。我在这里看到的一个问题是,你的函数名中有
-
。这不是函数名的合法字符。看看jquery和AnimateThat,就是这样!!!太棒了!!!我不得不更改函数名,然后更改class到一个ID,从那以后一切都很顺利。非常感谢Schmatzy!!有人能给我举个例子,说明如何使用jQuery动画做同样的事情吗?我对jQuery不太熟悉,但我很想学习这个功能。