基于HTML/JS实现Bootstrap折叠面板Group1跳转至Group3的方案求助

Got it, let's get this working for you! Since you're using Bootstrap 3's accordion component, we need to handle two key actions when clicking the link in Group 1: expand Collapsible Group 3 (since it's collapsed by default) and scroll the page to your target section. Here are two straightforward solutions tailored to your code:

1. Pure HTML + Bootstrap Data Attributes (Simplest Approach) #

Bootstrap's collapse plugin lets you trigger panel expansion directly via built-in data attributes. Just update the link in Group 1 to target both the collapse panel and your anchor element:

<!-- Replace the link in Collapsible Group 1's panel-body with this -->
<a href="#JumpToGroup3" data-toggle="collapse" data-target="#collapse3" data-parent="#accordion">click here</a>

How it works: #

• data-toggle="collapse" tells Bootstrap to trigger a collapse action
• data-target="#collapse3" specifies which panel to expand
• data-parent="#accordion" maintains the accordion's default behavior (closing other panels when one opens)
• href="#JumpToGroup3" handles scrolling to your target text after the panel expands

2. jQuery/JavaScript Method (More Control & Smooth Scrolling) #

If you want smoother animation or need custom logic, use this jQuery snippet. It first expands Group 3, then animates the scroll to your target element with padding for better visibility:

First, add a unique class to your link for targeting:

<!-- In Collapsible Group 1's panel-body -->
<a href="#" class="jump-to-group3">click here</a>

Then add this script right before the closing </body> tag:

<script>
$('.jump-to-group3').on('click', function(e) {
  e.preventDefault(); // Prevent default link behavior
  
  // Expand Collapsible Group 3
  $('#collapse3').collapse('show');
  
  // Wait for Bootstrap's collapse animation to finish, then scroll smoothly
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: $('#JumpToGroup3').offset().top - 20 // -20 adds padding above the target
    }, 300); // 300ms animation speed
  }, 300); // Matches Bootstrap's collapse animation duration
});
</script>

Full Modified Code (HTML Method Implemented) #

Here's your complete updated code with the first solution ready to use:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
          <!-- Updated link here -->
          <a href="#JumpToGroup3" data-toggle="collapse" data-target="#collapse3" data-parent="#accordion">click here</a> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea .</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
          <b id="JumpToGroup3">JUMP HERE</b> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

内容的提问来源于stack exchange，提问作者user19328544