javascript - 切换div时，已切换的div取消切换

我停留在一些代码上，我不清楚如何在不编写大量代码的情况下使其发挥作用。
这个想法是，当一个div切换为显示隐藏文本时，当您单击另一个div时，该一个将取消切换，仅显示另一个。
我知道如何手动执行此操作（使用大量代码），但我想知道是否存在“通用”代码行，我可以将其粘贴在每行代码后面。

这是我的JS：

        $(document).ready(function(){
    $('#bioInfo').on('click', function(){
    $('#bioInfoText').toggle();
  });
     $('#bioTech').on('click', function(){
    $('#bioInfoText').toggle();
  });
    $('#bioFuture').on('click', function(){
    $('#bioFutureText').toggle();
  });
    $('#bioCont').on('click', function(){
    $('#bioContText').toggle();
  });
    $('#bioAdd').on('click', function(){
    $('#bioAddText').toggle();
  });
    $('#bioPrac').on('click', function(){
    $('#bioPracText').toggle();
  });
     $('#automInfo').on('click', function(){
    $('#automInfoText').toggle();
  });
    $('#automFuture').on('click', function(){
    $('#automFutureText').toggle();
  });
     $('#autom').on('click', function(){
    $('#automInfoText').toggle();
  });
    $('#automContent').on('click', function(){
    $('#automContentText').toggle();
  });
    $('#automAdd').on('click', function(){
    $('#automAddText').toggle();
  });
    $('#automPrac').on('click', function(){
    $('#automPracText').toggle();
  });
     $('#itInfo').on('click', function(){
    $('#itInfoText').toggle();
  });
     $('#it').on('click', function(){
    $('#itInfoText').toggle();
  });
    $('#itFuture').on('click', function(){
    $('#itFutureText').toggle();
  });
    $('#itCont').on('click', function(){
    $('#itContText').toggle();
  });
    $('#itAdd').on('click', function(){
    $('#itAddText').toggle();
  });
    $('#itPrac').on('click', function(){
    $('#itPracText').toggle();
  });

如您所见，它一个接一个地切换，但是只有当我手动单击该单独的div时才会关闭，这是不希望的。

最佳答案

最好在其他实现中使用它。对于解决方案，请在此处使用重置功能：

function resetAll() {
  $('[id$="Text"]').hide();
  // Translates to:
  $("#bioInfoText, #bioInfoText, #bioFutureText, #bioContText, #bioAddText, #bioPracText, #automInfoText, #automFutureText, #automInfoText, #automContentText, #automAddText, #automPracText, #itInfoText, #itInfoText, #itFutureText, #itContText, #itAddText, #itPracText").hide();
}

然后在每次单击中调用resetAll()函数。

关于javascript - 切换div时，已切换的div取消切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41193199/