javascript - 当 div 被切换时，已经切换的 div 不再切换

Question

我被一些代码困住了，我不清楚如何在不编写大量代码的情况下使其发挥作用。 这个想法是，当一个 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 时才会关闭，这是不希望的。

Answer 1

最好将其放在不同的实现中。对于解决方案，这里使用重置函数:

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()函数。