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

【问题标题】：Toggle visibility without stacking for multiple elements在不堆叠多个元素的情况下切换可见性
【发布时间】：2017-09-02 17:44:17
【问题描述】：

我正在尝试切换 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，然后显示：当前打开的一个或所有预期的无一个点击了，所以两个或更多不能同时打开？

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;}

由于某种原因，它在小提琴上似乎对我不起作用，但在我的 live 版本上却可以。

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

【问题讨论】：

我也试过这个堆栈切换但不确定如何在单击下一个而不是堆栈时使其关闭全部打开：function toggle_visibility() { function toggle(id){ var el = document.getElementById(id); el.style.display = el.style.display==='none' ? 'block' : 'none'; } for(var i=0; i<arguments.length; ++i){ toggle(arguments[i]); } }

标签： javascript jquery css toggle

【解决方案1】：

希望这就是你要找的。p>

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>

【讨论】：

是的，但是如果文本与 ID 相同，它不仅可以工作吗？
例如，如果单击图像切换，就好像它不是与 id 匹配的文本？
所有 HTML 元素都可以具有 ID 属性，例如：<img id="logo" src="nsc/logo2.png" alt="BrandLog" />。同样，所有 HTML 元素都可以具有类属性，如 <img id="logo" class= 'image' src="nsc/logo2.png" alt="BrandLog" />。您可以使用 ID 和 class 属性来获取 HTML 元素的句柄并操作 DOM。
更新了上面的代码以根据a 标签的名称属性切换divs。请注意，每个元素的 id 应该是唯一的。
在var e = document.getElementById(id); 之前放置$(".toggle").hide();。那应该隐藏所有的div。