javascript - 试图做到这一点，以便我可以使用 div 打开一个 div，关闭任何其他打开的 div，然后滚动到我单击的 div 打开它

Question

对不起，如果这令人困惑。我有一组包含标题的六个 div。我希望这样当您单击 div 时，会在显示信息的标题下打开一个新 div。当用户单击下一个标题时，我希望它关闭打开的 div，打开新的 div，然后滚动到新打开的 div 的标题。

到目前为止，除了滚动到我刚刚单击的 div 之外，我可以让它做所有事情。我已经尝试了很多在这里找到的不同代码，但是我对 jquery 的了解还不够，无法弄清楚。非常感激任何的帮助。

您可以在此处查看页面 - http://justinj16.sg-host.com/services/

现在只有前两个选项卡设置为打开（如果我不能让它工作，我不想再花时间了）。

这是我使用的代码 -

    <script>jQuery(document).ready(function($) {

  //Hide all content to be revealed
  $('.reveal_content').hide();

  //Create the click event for each reveal button
  $('.reveal_button').click(function (e) {

  //Prevent the default button action (i.e. redirecting to a url)
    e.preventDefault();

    //Get the parent section for the button clicked
  $parent_section = $(this).closest('.reveal_section');

  //Remove the opened class from all other buttons
  $('.reveal_button').not(this).removeClass('opened');

  //Close all content in other sections
  $('.reveal_section').not($parent_section).find('.reveal_content').fadeOut('slow');

  //Hide/Reveal the content in the same section as the button clicked
  $(this).addClass('opened');
  $parent_section.find('.reveal_content').each(function() {
    $(this).slideToggle();
  }
  )

  });

  }
)</script>

标签： javascripthtmljquerycss

Answer 1

尝试以下操作：

$("h2").click(function() {
  $(".content.active").removeClass("active");
  $(this).parent().find(".content").addClass("active");

  $("html,body").animate({
    scrollTop: $(".content.active").offset().top
  }, 1000);
});

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.block {
  text-align: center;
  width: 30%;
  border: 1px solid #777;
  height: auto;
  padding: 40px 0px;
}

.content {
  height: auto;
  max-height: 0;
  overflow: hidden;
}

.content.active {
  max-height: unset;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="block">
    <h2>title</h2>
    <div class="content">
      this is a content
    </div>
  </div>
  <div class="block">
    <h2>title</h2>
    <div class="content">
      this is a content
    </div>
  </div>
  <div class="block">
    <h2>title</h2>
    <div class="content">
      this is a content
    </div>
  </div>
  <div class="block">
    <h2>title</h2>
    <div class="content">
      this is a content
    </div>
  </div>
  <div class="block">
    <h2>title</h2>
    <div class="content">
      this is a content
    </div>
  </div>
  <div class="block">
    <h2>title</h2>
    <div class="content">
      this is a content
    </div>
  </div>
</div>