使用'width'屬性切換選單

我在網上商店作業，希望在商店的每一側都有兩個切換選單。

當我點擊“個人”或“購物車”時，切換選單打開。當我點擊“回傳”時，它們會再次關閉
（見下圖）。

所以我的問題是，在右側，它運行良好，但在左側，切換選單內的文本在關閉選單后不會消失（見下圖）。

我在這里使用“寬度”屬性。因此，當我單擊“回傳”時，寬度將設定為“0px”。并且'當點擊'個人'或'購物車'時，寬度將設定為'285px'

（我正在使用“寬度”，因為我想要一個過渡）

這是我的代碼：

html:

<div id="personal_toggle_menu">

            <div id="back_toggle_menu_personal" class="back_toggle_menu">back</div>
            <ul class="toggle_menu_ul">

                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>

            </ul>

        </div>

        <!-- toggle menu shopping cart  -->

        <div id="shopping_cart_toggle_menu">

            <div id="back_toggle_menu_shopping_cart" class="back_toggle_menu">back</div>
            <ul class="toggle_menu_ul">

                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>

            </ul>

        </div>

CSS：

/*todo toggle menu personal */

#personal_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid black;
    background-color: white;
    text-align: left;
}

/*todo toggle menu shopping cart */

#shopping_cart_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid black;
    background-color: white;
    text-align: right;
}

js：

/* toggle menu show */

function nav_toggle_personal()
{
    if (nav_toggle_status_personal = true)
    {
        toggle_personal_style.style.width = "285px";
        toggle_personal_style.style.transition = "width 0.5s";
    }
}

function nav_toggle_shopping_cart()
{
    if (nav_toggle_status_shopping_cart = true)
    {
        toggle_shopping_cart_style.style.width = "285px";
        toggle_shopping_cart_style.style.transition = "width 0.5s";
    }
}

nav_personal_img.addEventListener("click", nav_toggle_personal);
nav_shopping_cart_img.addEventListener("click", nav_toggle_shopping_cart);

/* toggle menu back */

function nav_toggle_personal_back()
{
    if (nav_toggle_status_personal = true)
    {
        toggle_personal_style.style.width = "0px";
        toggle_personal_style.style.transition = "width 0.5s";
    }
}

function nav_toggle_shopping_cart_back()
{
    if (nav_toggle_status_shopping_cart = true)
    {
        toggle_shopping_cart_style.style.width = "0px";
        toggle_shopping_cart_style.style.transition = "width 0.5s";
    }
}

nav_personal_back.addEventListener("click", nav_toggle_personal_back);
nav_shopping_cart_back.addEventListener("click", nav_toggle_shopping_cart_back);

uj5u.com熱心網友回復：

放入overflow: hidden選單css。

#personal_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid black;
    background-color: white;
    text-align: left;
    overflow: hidden;
}

/*todo toggle menu shopping cart */

#shopping_cart_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid black;
    background-color: white;
    text-align: right;
    overflow: hidden;
}

標籤：

上一篇：我如何將我在導航欄中寫的串列居中居中

下一篇：如何使用GoogleApps腳本中的按鈕打開另一個頁面？