如何使用 Bootstrap 类切换独占可见性？答案

【问题标题】：How to toggle exclusive visibility with Bootstrap classes?如何使用 Bootstrap 类切换独占可见性？
【发布时间】：2020-04-08 21:05:00
【问题描述】：

所以基本上我在一些文件夹图标上附加了一个 jQuery 函数，可以切换不同 div 的可见性：

$(document).ready(function() {
  $("#techfolder").click(function(){
    $("#txt").toggleClass("d-none");
  });
  $("#persfolder").click(function(){
    $("#txt2").toggleClass("d-none");
  });
  $("#linkfolder").click(function(){
    $("#txt3").toggleClass("d-none");
  });
});

唯一的问题是，如果一个元素是可见的，并且在单击与不同元素关联的另一个文件夹之前没有单击它的文件夹使其消失，则新可见的元素会出现在第一个元素的下方。我想做到这一点，以便这些元素的可见性是专有的，并且一次只能显示一个。我似乎无法弄清楚如何做到这一点。

非常感谢任何帮助！

【问题讨论】：

如果用户只点击可见的文件夹会发生什么？所有元素都将被隐藏？
您必须跟踪之前单击的那个，并在单击另一个时隐藏它。或者简单地使用兄弟选择器$("#txt").siblings().removeClass('d-none');

标签： jquery css twitter-bootstrap

【解决方案1】：

这可能不是最简单的方法，但您可以做的是提及数组中的所有唯一元素，然后触发检查以查看您单击的元素中的元素是否是子元素，然后切换显示无.

如果它不是直接子代，则检查“d-none”是否处于活动状态，然后切换它。

可能有一种更简单的方法，但此答案基于您保持 HTML 不变的假设。

var arrayOfElements = [$("#txt"), $("#txt2"), $("#txt3")];

$('#techfolder, #persfolder, #linkfolder').click(function(){
 checkDisplayNone($(this));
});


function checkDisplayNone(elem) {
  innerElem =  elem.children();
  for (i = 0; i < arrayOfElements.length; i++) {
    if (innerElem[0].id !== arrayOfElements[i][0].id) {
      if (!arrayOfElements[i].hasClass('d-none'))
      arrayOfElements[i].toggleClass('d-none'); 
    } else {
    	arrayOfElements[i].toggleClass('d-none');
    }
  }
}

#techfolder {
  width: 100px;
  height: 100px;
  background: red;
  margin: 1rem;
}

#persfolder {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 1rem;
}

#linkfolder {
  width: 100px;
  height: 100px;
  background: green;
  margin: 1rem;
}

.d-none {
  display: none;
}

<html>
<div id="techfolder">
  <div id="txt" class="d-none">
  text
  </div>
</div>
<div id="persfolder">
  <div id="txt2">
  text
  </div>
</div>
<div id="linkfolder">
  <div id="txt3">
  text
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>

【讨论】：