一次切换所有 div 的可见性

Question

我有多个 id = e 的 div。还有多个 id = b 的 div。现在我想隐藏所有id为e的div，显示所有id为b的div。这应该使用 toggle 来完成。所以再次点击按钮显示所有id为e的div并隐藏所有id为b的div。

<script>
            function toggle_visibility(e, b) {  
   var e = document.getElementById(e);
   var e2 = document.getElementById(b);
   if(e.style.display == 'none') {                
      e.style.display = 'inline-block'; //block will show the conain in div            
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'inline-block';
   }              
}
        </script>
        <style>
            .menu{
                display:inline-block;
                border:1px;
                border-style: solid;
                border-color: black;
                width:auto;
                height:30px;
                padding: 5px;
                margin: 2px;
            }
        </style>
        <a href="#id" onclick="toggle_visibility('e', 'b');">Change</a>

        <div id="e" class="menu">Male</div><div id="b" class="menu" style="display: none;">পুরুষ</div>

        <div id="e" class="menu">Female</div><div id="b" class="menu" style="display: none;">মহিলা</div>

Answer 1

根据 W3C rules，HTML 页面中的任何 element 的

id 必须是 unique。我建议在每个必须通用的 div 中添加一个单独的 class。比如说，将 classA 添加到 divs，其 id 必须是 e，将 classB 添加到 divs，其 id 必须是 b.

$(".toggleVisible").on('click', function(e) {
  e.preventDefault();
  $('.classA,.classB').slideToggle(); 
  //slideToggle will toggle whichever hidden to display and vice versa
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggleVisible">Change</a>

<div class="menu classA">Male</div>
<div class="menu classB" style="display: none;">পুরুষ</div>

<div class="menu classA">Female</div>
<div class="menu classB" style="display: none;">মহিলা</div>

Javascript版本

function toggle_visibility() {
  var e = document.getElementsByClassName("classA");//returns an array of elements
  //Assuming that you will have equal amount of classA and classB elements
  var e2 = document.getElementsByClassName("classB");
  for (var i = 0; i < e.length; i++) {
    if (e[i].style.display == 'none') {
      e[i].style.display = 'inline-block'; //block will show the conain in div            
      e2[i].style.display = 'none';
    } else {
      e[i].style.display = 'none';
      e2[i].style.display = 'inline-block';
    }
  }

}

<a onclick="toggle_visibility()">Change</a>

<div class="menu classA">Male</div>
<div class="menu classB" style="display: none;">পুরুষ</div>

<div class="menu classA">Female</div>
<div class="menu classB" style="display: none;">মহিলা</div>

Answer 2

id 必须是唯一的...您可以使用通用的 class 名称来定位多个元素，如下所示：

     function toggle_visibility(e, b) {
       var e = $(".e");
       var e2 = $(".b");
       if (e.is(":visible")) {
         e2.show();
         e.hide();
       } else {
         e2.hide();
         e.show();
       }
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#id" onclick="toggle_visibility('e', 'b');">Change</a>

<div id="e" class="menu e">Male</div>
<div id="b" class="menu b" style="display: none;">পুরুষ</div>

<div id="e" class="menu e">Female</div>
<div id="b" class="menu b" style="display: none;">মহিলা</div>

Answer 3

不要将 id 用作多个！ 因此将您的 id 值移动到 as class name

function toggle_visibility(e, b) {  
   var e = document.getElementsByClassName(e);
   var e2 = document.getElementsByClassName(b);
   for(var i =0;i<e.length;i++){
     if(e[i].style.display == 'none') {                
        e[i].style.display = 'inline-block'; //block will show the conain in div            
        e2[i].style.display = 'none';
     }
     else {
        e[i].style.display = 'none';            
        e2[i].style.display = 'inline-block';
     }              
  }
}

如果你想在Jquery中做，我认为不需要参数..

function toggle_visibility() {  
  $('.e').toggle();
  $('.b').toggle();
}

一次切换所有 div 的可见性

Toggle visibility of all divs at once

html

javascript

css

jquery

toggle