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() {

  });
  }
});

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

1 个答案: