Question

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

显示了5个导航/按钮选项
当用户点击任何按钮时，其余按钮似乎堆积在所选按钮的顶部（转换或隐藏），因此只显示一个按钮
当用户点击所选按钮时，显示其余按钮/选项

对不起，如果这听起来很混乱。我一直在寻找各处，似乎找不到任何解决方案。谢谢！

到目前为止我的代码是html：

＆＃13;

<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>

＆＃13;

Answer 1

这是没有动画的

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

用户点击选项

1 个答案: