使用JavaScript顯示和隱藏帶有CSS過渡的窗格-有解無憂

在我的 ASP.NET 專案中，我想添加一個表單，當單擊按鈕時，會顯示帶有過渡的表單。

我在這個位置專案中找到了這樣做的方法

根據示例，它有一個復選框，當單擊該復選框時，表單將從側視圖顯示，再次單擊它會隱藏。

但是對于我的專案，我創建了 2 個按鈕，我想通過單擊按鈕來顯示相同??的內容。

<button class="btn-primary floating-btn1" id="clickerBranch" onclick="branchOnClick();">Branches</button>
<button class="btn-primary floating-btn" id="clickerService" onclick="serviceOnClick();">Service Prices</button>

這是我從示例專案中包含的 CSS 樣式

.floating-btn {
        width: 80px;
        height: 80px;
        background: #267410;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: auto;
        color: aliceblue;
        font-size: 16px;
        font-style: oblique;
        position: fixed;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
        right: 20px;
        bottom: 50px;
        border-radius: 50%
    }
.panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #333;
        color: #000000;
        overflow: auto;
        padding: 1em;
    }
 .ServicePanel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: aliceblue;
        color: #000000;
        overflow: auto;
        padding: 1em;
    }

    [type="checkbox"]:checked ~ .panel-wrap {
        transform: translateX(0%);
    }

    *, *:before, *:after {
        box-sizing: border-box;
    }
    [type="checkbox"] {
        font-size: 1em;
    }

這些是我想在單擊每個按鈕時顯示的單獨面板

<div class="panel-wrap">
  <div class="panel"> Sample </div>
</div>
<div class="panel-wrap">
  <div class="panel2"> Sample </div>
</div>

所以我嘗試根據樣本做同樣的事情，但我找不到這樣做的方法。你能幫我解決這個問題嗎？我計劃的最終輸出是，當每個按鈕單擊 panel 和 panel2 時，我想顯示和隱藏過渡。

這是我試圖測驗的。

<script type="text/javascript">

    function branchOnClick() {
        alert("H");
        $("ServicePanel").show();
    }

</script>

uj5u.com熱心網友回復：

 body{
        margin: 0;
        padding: 0;
    }

    .click_me {
        display: block;
        width: 200px;
        padding: 5px;
    }

    .sidebar{
        width: 320px;
        height: 100vh;
        background-color: black;
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        transform: translateX(100%);
        transition: .3s ease-out;
    }

    .showSideBar{
        transform: translateX(0%);
    }

    <div style="width:100%; height:100vh; background-color:#ccc;">
        <button class="click_me" onclick="myFunction()">Click Me</button>
    </div>
    <div id="myDIV" class="sidebar"></div>

 function myFunction() {
           var element = document.getElementById("myDIV");
           element.classList.toggle("showSideBar");
        }

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/507571.html

標籤：javascript jQuery css

上一篇：如何將錄制的音頻（Blob）上傳到服務器？-反應JS

下一篇：將物件轉換為陣列物件內的物件陣列