如何切换其他引导按钮的内容？答案

【问题标题】：How do I toggle the content of the other bootstrap buttons?如何切换其他引导按钮的内容？
【发布时间】：2019-07-30 22:50:38
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案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() {

  });
  }
});

【讨论】：