javascript - 如何将 slideToggle 与动画和自动滚动相关联以达到匹配的 DIV？

Question

我有几个隐藏的 DIV，我想为 slideToggle 设置动画。所有按钮都获得链接以滚动到匹配的 DIV。

问题是当我点击按钮时，滚动在到达 DIV 之前就停止了。那么我该怎么做才能使用 .slideToggle 完成滚动(即慢速滚动)并为其设置动画？

$(document).ready(function() {
  $(".menu").hide();

  $(".tog").click(function() {
    $(".menu:visible").toggle();
    if (!$("." + $(this).data('id')).is(':visible')) {
      $("." + $(this).data('id')).slideToggle();
    }
  });
});

.edsContenu  {
  padding: 5px;
  text-align: center;
  background-color: #00011f;
  display: none;
  height:200px;

}

.bridgeContenu{
  padding: 5px;
  text-align: center;
  background-color: #00011f;
  display: none;
  height:200px;

}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<div id="discovered">

  <div id="file" class="container">
    <a href="#edsContenu" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
  </div>

  <div id="file" class="container">
    <a href="#bridgeContenu" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
  </div>

  <div id="edsContenu" class="menu edsContenu">
    <section id="content">
      <div id="text">
      </div>
    </section>
  </div>

  <div id="bridgeContenu" class="menu bridgeContenu">
    <section id="content">
      <div id="text">

      </div>
    </section>

  </div>

Answer 1

对代码做了一些修改，阅读评论

$(document).ready(function() {
  $(".menu").hide();
  $(".tog").click(function() { 
    
     var id = "#" + $(this).data('id')
     // hide all menu except the current one, otherwise using
     //  $(".menu:visible").hide() and using $(id).is(':hidden') after is really pointless
     $(".menu:visible:not('"+id+"')").toggle(); 
     if ($(id).is(':hidden')) {
       $(id).toggle("fast", function(){
         // after toggle is finished then animate scrollto
         $("html, body").animate({ scrollTop: $(id).offset().top }, 1000);
       });
    }
  });
});

.menu{
background:red;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="discovered">

  <div id="file" class="container">
    <a href="#research" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
  </div>

  <div id="file" class="container">
    <a href="#research" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
  </div>

  <div id="edsContenu" class="menu edsContenu">
    <section id="content">
      <div id="text">
     test edsContenu
      </div>
    </section>
  </div>

  <div id="bridgeContenu" class="menu bridgeContenu">
    <section id="content">
      <div id="text">
        test bridgeContenu
      </div>
    </section>

  </div>