響應式設計 - 如何切換菜單的可見性

Question

更新

我在這里有一篇關於 jsfiddles 的新帖子和一個更清晰的問題。

---

我正在嘗試使用響應式設計的原則來適應不斷變化的屏幕尺寸。 我有 CSS，它將隱藏 div ( main-nav-vert ) 中包含的垂直菜單，並在瀏覽器寬度下降到某個范圍內時顯示 div ( div_menu_toggle ) 中包含的“菜單”按鈕。 還有其他 div 大小調整發生，但此代碼已簡化。

單擊菜單按鈕時，js 代碼運行以通過更改其顯示屬性來切換菜單 div ( main-nav-vert )。

當瀏覽器寬度縮小時，按鈕出現和菜單被隱藏時，一切都很好。

然后，當單擊切換按鈕時，菜單會短暫顯示...然后再次自發消失。 我已經驗證隱藏 div 的代碼沒有運行（ .display = 'none' ）。 菜單是否因為 CSS 代碼始終處於活動狀態而再次隱藏？ 如果是這樣，我該如何完成這項任務？ 我正在尋找一個純 js 的答案，請不要使用 jQuery。 謝謝。

CSS

/* When screen shrinks to this range, hide Menu, display Menu button   */
@media (max-width: 697px) and (min-width: 320px) {
    .div_menu_toggle{
        display: block;
    }
    .main-nav-vert{
        display: none;
    }
    
}

JS

<script type="text/javascript">
function showmenu() {
    var mainnavvert = getElementsByClassName('main-nav-vert');
    var i, s, len = mainnavvert.length;
    for (i = 0; i < len; ++i) {
        if (i in mainnavvert) {
        // toggle the menu
            mainnavvert[i].style.display = 'block';
        } else {
            mainnavvert[i].style.display = 'none';
        }
    }
}

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else {
        return document.querySelectorAll('.' + className);
    }
}
</script>

Answer 1

*未經測試，但我猜你只需要一個單獨的類 display:none 和 display:block;

然后改變班級，而不是風格。 就像是

 if (i in mainnavvert) {
        // toggle the menu
            mainnavvert[i].className = "show-me";
        } else {
            mainnavvert[i].className = "hide-me";
        }
 }

Answer 2

根據當前狀態切換顯示。 這樣的事情可能會奏效。

for (i = 0; i < len; ++i) {
    var menu = mainnavvert[i];
    if (menu.style.display === 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
}

Answer 3

您需要學習新課程來設置活動/非活動切換菜單。

css

    /* When screen shrinks to this range, hide Menu, display Menu button   */
    @media (max-width: 697px) and (min-width: 320px) {
       .div_menu_toggle{
           display: block;
       }
       .main-nav-vert{
           display: none;
       }
       .main-nav-vert.active{
           display: block;
       }

    }

js

<script type="text/javascript">
function showmenu() {
    var mainnavvert = getElementsByClassName('main-nav-vert');
    var i, s, len = mainnavvert.length;
    for (i = 0; i < len; ++i) {
        if (i in mainnavvert) {
        // toggle the menu
            if(mainnavvert[i].style.display == "block")
               removeClass(mainnavvert[i]);
            }
            else {
               addClass(mainnavvert[i]);
            }
        }
    }
}

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else {
        return document.querySelectorAll('.' + className);
    }
}

function addClass(ele) {
    var classString = ele.className; 
    var newClass = classString.concat(" active"); 
    ele.className = newClass; 
}

function removeClass(ele)
{
    [].forEach.call(ele, function(el) {
       el.classList.remove("active");
    });
}

});

因為你想要純 javascript，所以它在這里，但是如果你用 jquery 來做，代碼會非常流暢和優化，我不知道為什么你使用 for 循環，如果只有 1 個元素，那么你可以忽略循環。