javascript - 用户单击选项时的导航/按钮堆积效果

Question

我不确定这是否可行，但我有一个包含 5 个按钮的页面可供选择。这在某种程度上可以像导航栏一样工作。我想知道以下是否可以使用 CSS/JS:

• 显示 5 个导航/按钮选项
• 当用户点击任何按钮时，其余按钮似乎堆积在所选按钮(转换或隐藏)之上，因此只显示一个按钮
• 当用户点击所选按钮时，将显示其余按钮/选项

抱歉，如果这听起来令人困惑。我一直在到处寻找，似乎找不到任何解决方案。谢谢!

到目前为止，我的 html 代码是:

<div class="analytics_buttons">
  <input class="form-btn" type="button" name="btn1" Value="Option 1" />
  <input class="form-btn" type="button" name="btn2" Value="Option 2" />
  <input class="form-btn" type="button" name="btn3" Value="Option 3" />
  <input class="form-btn" type="button" name="btn4" Value="Option 4" />
  <input class="form-btn" type="button" name="btn5" Value="Option 5" />
</div>

Answer 1

这是一个没有动画的

$(function() {
  $(".form-btn").on("click",function(e) {
    // e.preventDefault(); // stop event if necessary
    $(".form-btn").removeClass("top").toggleClass("stacked");
    $(this).addClass("top");
  });
})

.stacked { display: block; position: absolute; left:0px }
.top {
  z-index:9999 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="analytics_buttons">
  <input class="form-btn top" type="button" name="btn1" Value="Option 1" />
  <input class="form-btn" type="button" name="btn2" Value="Option 2" />
  <input class="form-btn" type="button" name="btn3" Value="Option 3" />
  <input class="form-btn" type="button" name="btn4" Value="Option 4" />
  <input class="form-btn" type="button" name="btn5" Value="Option 5" />
</div>