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然后显示：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;}

由于某种原因，它似乎不适合我的小提琴，但在我的现场版本中。

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>

切换可见性而不堆叠多个元素

1 个答案: