ユーザーがオプションをクリックしたときのナビゲーション/ボタンの重ね書き効果

Question

これが可能かどうかはわかりませんが、5つのボタンから選択できるページがあります。これは途中でnav barのように動作します。

• 5 NAV /ボタンのオプションは、ユーザーがいずれかのボタンをクリックすると、ボタンの残りの部分は（選択されたボタンの上に重ねているように見える
• を表示：下記のCSS/JSを使用して可能である場合、私は疑問に思ってトランジションまたは非表示）ので、一つだけのボタンが表示され
• ユーザーが選択したボタンをクリックしたときにボタン/残りのオプションが表示され、これが混乱に聞こえる場合

申し訳ありません。私はどこからでも探していて、これに対する解決策は見つけられないようです。ありがとうございました！

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

は、アニメーションなしの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>