javascript - 如何切换其他引导按钮的内容？

Question

我正在使用 bootstrap 和 scss 创建一个 wordpress 页面，但我在尝试创建可折叠内容时遇到了一些问题。我有四个按钮，我希望只显示其中一个的内容，而其他按钮则被折叠。例如，如果我单击第二个按钮，按钮 1、3 和 4 应该什么都不显示。

我还有一个事件类，可以清楚地显示按下哪个按钮时它无法正常工作。任何帮助都会非常好，谢谢!

    var mainStarter = {
      initialize: function() {
        this.buttonActive();
        this.toggleButton();
      },

      buttonActive: function() {
        $(".btn.btn-bg-md").on("click", function() {
          $(this).toggleClass('active');
        });
      },

      toggleButton: function() {
        $('.column button').click(function() {
          $(".collapse:visible").add($(this).next()).slideToggle();

        });
      },


      $(function() {
        mainStarter.initialize();
      });
      

.row {
  display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <!-- Item 1 -->
  <div class="column">
    <button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn1" aria-pressed="false" autocomplete="off">
            <h6>Day 1</h6>
          </button>
  </div>
  <!-- Item 2 -->
  <div class="column">
    <button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn2" aria-pressed="false" autocomplete="off">
            <h6>Day 2</h6>
          </button>
  </div>
  <!-- Item 3 -->
  <div class="column">
    <button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn3" aria-pressed="false" autocomplete="off">
            <h6>Day 3</h6>
          </button>
  </div>
  <!-- Item 4 -->
  <div class="column">
    <button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn4" aria-pressed="false" autocomplete="off">
            <h6>Day 4</h6>
          </button>
  </div>

  <div class="container">
    <div class="collapse" id="btn1">
      <h1>Something 1</h1>
    </div>
  </div>
  <div class="container">
    <div class="collapse" id="btn2">
      <h1>Something 2</h1>
    </div>
  </div>
  <div class="container">
    <div class="collapse" id="btn3">
      <h1>Something 3</h1>
    </div>
  </div>
  <div class="container">
    <div class="collapse" id="btn4">
      <h1>Something 4</h1>
    </div>
  </div>

</div>

Answer 1

我不太确定你真正想要什么(你的信息不是很清楚)。我的理解是，你想要 2 个按钮。当您单击第一个时，它会显示第一条消息并隐藏第二条消息。当您单击第二个时，它会显示第二条消息并隐藏第一条消息。如果我理解正确的话，你可以使用 jquery，在 div 上使用正确的 id

$("#button1").click(function() {
    if ($("#collapsebutton2").is(":visible")) {
    $("#collapsebutton2").toggle( "slow", function() {

    });
  }
  $("#collapsebutton1").toggle( "slow", function() {

  });

});

$("#button2").click(function() {
  $("#collapsebutton2").toggle( "slow", function() {

  });

  if ($("#collapsebutton2").is(":visible")) {
    $("#collapsebutton1").toggle( "slow", function() {

  });
  }
});