Question

一次单击即可隐藏和显示多个 div

2016-01-01

2967

javascript jquery html

我试图通过一次点击隐藏和显示两个 div。

<a href="javascript:showhide('bbb','ccc4')">
    you click here to see two div contents </a>sddsds<br />
</a>

我只能隐藏和显示一个 div。当我尝试使用 ID 隐藏和显示两个 div 时，却无法成功。我尝试过其他一些建议，但都不起作用。

<a href="javascript:showhide('bbb','ccc4')">
    you click here to see two div contents </a>sddsds<br />
</a>

<div target='ccc4' name='ccc4'  id='ccc4' frameborder='0'onload='setIframeHeight(this.id)'   style='display:none;'  ' > ddfddddd

    <iframe class='shark'  src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='ccc' name='ccc'  id='ccc' frameborder='0'onload='setIframeHeight(this.id)'     style='display:none;'              ></iframe>

</div> <div target='bbb' name='bbb'  id='bbb' frameborder='0'onload='setIframeHeight(this.id)'   style='display:none;'  ' > sdds

    <iframe class='shark'  src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='bbb' name='bbb'  id='bbb' frameborder='0'onload='setIframeHeight(this.id)'     style='display:none;'              ></iframe>

</div>
<script type="text/javascript">
  function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
  }
</script>

我尝试过使用下面的 Javascript，但同样不起作用。

<script type="text/javascript">
    function toggle_visibility() {
        for (var i = 0, len = arguments.length; i < e; i++) {
            var e = document.getElementById(arguments[i]).style,d = e.display;
            e.display = (d == "block") ? "none" : "block";
        }
    } 
</script>

有没有办法通过一次点击隐藏多个 div，还是必须使用 class 而不是使用 ID？

Answer 1

function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

这里你只处理一个 ID。

重写你的函数以隐藏两个 ID。类似这样的代码：

function showhide(id1, id2) {
    var e = document.getElementById(id1);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    e = document.getElementById(id2);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

为了减少代码重复，请使用数组来存储 ID：

function showhide(ids) {
    for (var i = 0; i < ids.length; i++) {
        var e = document.getElementById(ids[i]);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
}

并调用它：

showhide(['bbb', 'ccc4'])

或者你可以使用 arguments ：

function showhide() {
    for (var i = 0; i < arguments.length; i++) {
        var e = document.getElementById(arguments[i]);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
}

在这种情况下，调用应该是：

showhide('bbb', 'ccc4')

Answer 2

将您想要切换显示的每个 div 添加为单独的参数：

<a href="javascript:showhide('bbb', 'ccc4')">

然后更改您的 JS 以包含参数数组上的循环：

<script type="text/javascript">
  function showhide() {
    for(var i = 0; i < arguments.length; i++){
      var e = document.getElementById(arguments[i]);
      e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
  }
</script>

Answer 3

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function toggle_visibility(id) 
    {var e = document.getElementById(id);
    if(e.style.display == 'block')e.style.display = 'none'; 
    else e.style.display = 'block'; }
</script>

<a onclick="toggle_visibility('div-to-hide');">

<div id="div-to-hide" class="div-to-hide">
---- content here ---
</div>