在不堆叠多个元素的情况下切换可见性

Question

我正在尝试切换 div 的可见性，这样它就不会堆叠，而是一次切换一个。切换（尽管堆叠）部分正在工作，代码在底部，但这是我尝试过的（但这对我不起作用）：

function toggle_visibility(id) {
      var specifiedElement = document.getElementById(id);
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
           if(specifiedElement.style.display == 'block')
              specifiedElement.style.display = 'none';
           else
              specifiedElement.style.display = 'block';
            }
        else {
          if(specifiedElement.style.display == 'block')
              specifiedElement.style.display = 'none';
        }
    });
}

下面是我的用于切换的代码，但它目前堆叠的数量与点击的数量一样多，最简单的方法是如何检测是否点击了其他切换 ID 然后 display:none 用于当前打开一个或所有期望单击一个，以便两个或多个永远不能同时打开？

html:

<a href="#" style="margin-right:15px;" onClick="toggle_visibility('a');"> a </a>

<a href="#" style="margin-right:15px;" onClick="toggle_visibility('b');"> b </a>

<a href="#" style="margin-right:15px;" onClick="toggle_visibility('c');"> c </a>

<div class="toggle" id="a" >
a
</div>

<div class="toggle" id="b" style="display:none;">
b
</div>

<div class="toggle" id="c" style="display:none;">
c
</div>

javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

</script>

CSS

.toggle {width:100%; background-color:#F00; position:relative;}

出于某种原因，它似乎在 fiddle 上对我不起作用，但在我的实时版本上却起作用。

https://jsfiddle.net/3mcf55xf/3/

Answer 1

希望这就是您要找的。

function toggle_visibility(id) {
    $(".toggle").not($("#" + id)).hide(); //hide all div elements except the current clicked a element
    $("#" + id).toggle(); //show/hide the div element
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="#" onClick="toggle_visibility('a');">a</a>
<a href="#" onClick="toggle_visibility('b');">b</a>
<br/><br/>
<div class="toggle" id="a" style="display:none;">div 1</div>
<div class="toggle" id="b" style="display:none;">div 2</div>

在不堆叠多个元素的情况下切换可见性

Toggle visibility without stacking for multiple elements

javascript

css

jquery

toggle