我会把纽扣上的ID去掉。
变更：

• 从打开按钮中删除ID
• 创建了两个新的打开按钮以说明
  *单击按钮时关闭任何打开的按钮更改问题代码的键
• 例如，为每个按钮data-target-canvas="#offcanvas2"添加了一个jQuery选择器。
• 更新了代码，通过类工作，我添加到按钮offcanvas-open，而不是一个ID -如图所示，多个按钮一件事都工作。
• 这一切可能会更简单，对元素进行一些小的更新，但不希望偏离原始标记太远。
  编辑：在X按钮（关闭）上增加了一个目标，指向“之前”

// now just use the data attribute no matter what its target is
$("[data-target-canvas]").on("click", function() {
  $('.offcanvas.offcanvas-start').offcanvas("hide");
  const targ = $(this).data("target-canvas");
  $(targ).first().offcanvas("show");
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary" type="button" data-target-canvas="#offcanvas1">Open Offcanvas 1</button>
<button class="btn btn-primary" type="button" data-target-canvas="#offcanvas2">Open Offcanvas 2</button>
<button class="btn btn-primary" type="button" data-target-canvas="#offcanvas3">Open Offcanvas 3</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 1</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-target-canvas="#offcanvas3"></button>
  </div>
  <div class="offcanvas-body">
    <button class="btn btn-primary" type="button" data-target-canvas="#offcanvas3">Open Offcanvas 2</button>
  </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas3">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 3</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-target-canvas="#offcanvas2"></button>
  </div>
  <div class="offcanvas-body">
  </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas2">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 2</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-target-canvas="#offcanvas1"></button>
  </div>
  <div class="offcanvas-body">
    <button class="btn btn-primary" type="button" data-target-canvas="#offcanvas1">Open Offcanvas 3</button>
  </div>
</div>

第二个例子;放弃任何类选择器，所以我们需要做的就是添加数据属性到任何按钮等，它简单的“工作”。
一个二个一个一个
第三个例子;将容器类选择器作为目标，这样我们需要做的就是将data属性添加到任何容器中;然后把它挂接到按钮类，它就可以“工作”了。

/* Here we use the button class to determine the "next" target 
 *  If the button is "btn-close" then we go to the target of our "pointed to" element.
 *  If the button is NOT a "btn-close" then we simply use OUR target-canvas element.
 *  Since we need it more than once, we create a string canvasTarget to reuse.
 *  "event.delegateTarget" is what the event is hooked to (things with a data-target-canvas)
 *  "event.target" is whatever is clicked (the buttons) from our list; whatever is ON a "type" of button"; we had these so just used them: ".btn-close, .btn.btn-primary"
 */
$("[data-target-canvas]")
  .on("click", ".btn-close, .btn.btn-primary", function(event) {
    $('.offcanvas.offcanvas-start').offcanvas("hide");
    const canvasTarget = 'target-canvas';
    const base = $(event.delegateTarget).data(canvasTarget);
    const isClose = this.classList.contains('btn-close');
    //go get the value of our targets target
    const altTarg = $(base).data(canvasTarget);
    // when true we use the alt else we used the base from our delegate
    const nextTarg = isClose ? altTarg : base;
    $(nextTarg).first().offcanvas("show");
  });

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<span class="just-a-button" data-target-canvas="#offcanvas1">
<button class="btn btn-primary" type="button" >Open Offcanvas 1</button></span>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas1" data-target-canvas="#offcanvas2">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 1</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <button class="btn btn-primary" type="button">Open Offcanvas 2</button>
  </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas3" data-target-canvas="#offcanvas1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 3</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
  </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas2" data-target-canvas="#offcanvas3">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 2</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <button class="btn btn-primary" type="button">Open Offcanvas 3</button>
  </div>
</div>