空间不足时，将菜单选项置于“更多”按钮中

debugcn 发表于 Dev

苏韦伦收割者

我只是从网络开发开始，如果我的问题很琐碎，请对不起。

我使用的是Bootstrap 4，并创建navbar了汉堡菜单，当屏幕达到一定宽度时会隐藏整个菜单，但是我想更改单个菜单元素一一隐藏在“更多”按钮中，以便如果只有一个菜单选项对于要适合的菜单，只有该选项进入“更多”按钮。

首先，我尝试使用Javascript来调整屏幕宽度以使最后一个元素消失：

setInterval(okno, 25)

function okno() {
    var a = window.innerWidth;
    if (a < 1335) {
        document.getElementById("kontakt").style.display = "none";
    }
}

<nav class="navbar navbar-expand-xl navbar-light"
    style="background-color:dimgrey;position:fixed;width:100%;z-index:100">
    <button class="navbar-toggler" type="button" style="background:white;float:left !important" data-toggle="collapse"
        data-target="#colapsibleNavbar">
        <span class="navbar-toggler-icon" style="color:black !important"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="colapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="kopysno.html">Strona Główna</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="Aktualnosci.html">Aktualności</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown"
                        href="#">Informacje</a>
                    <div style="background-color:dimgrey" class="dropdown-menu">
                        <a class="dropdown-item" href="Historia.html">Historia</a>
                        <a class="dropdown-item" href="#">Geografia</a>
                        <a class="dropdown-item" href="#">Środowisko</a>
                        <a class="dropdown-item" href="#">Kartografia Archiwalna</a>
                        <a class="dropdown-item" href="#">Galeria Fotografii</a>
                    </div>
                </div>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">Filmy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Artykuły prasowe</a>
            </li>
            <li class="kontakt nav-item">
                <a class="nav-link" href="kontakt.html">Kontakt</a>
            </li>
        </ul>
    </div>
</nav>

但这根本不起作用，我也不知道为什么。你能帮助我吗？先感谢您。

特里比

您没有kontaktID的元素，但是可以使用的className查找它document.querySelector('.className')。

创建该函数并在加载DOM或调整窗口大小时调用它，为每个函数添加事件侦听器：

function okno() {
    if(window.innerWidth < 1335) {
         // Hide if window width is less than 1335
         document.querySelector(".kontakt").style.display = "none";
    } else {
         // Show if window with is greater or equal than 1335
         // Use empty string to set the default element display setting
         document.querySelector(".kontakt").style.display = "";
    }
}
// Call when DOM is loaded
document.addEventListener('DOMContentLoaded', okno);
// Call if window is resized
window.addEventListener('resize', okno);

<nav class="navbar navbar-expand-xl navbar-light" style="background-color:dimgrey;position:fixed;width:100%;z-index:100">
                        <button class="navbar-toggler" type="button" style="background:white;float:left !important" data-toggle="collapse" data-target="#colapsibleNavbar">
                            <span class="navbar-toggler-icon" style="color:black !important"></span>
                        </button>
                        <div class="collapse navbar-collapse justify-content-center" id="colapsibleNavbar">
                        <ul class="navbar-nav" >
                            <li class="nav-item">
                                <a class="nav-link" href="kopysno.html">Strona Główna</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="Aktualnosci.html">Aktualności</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
                            </li>
                            <li class="nav-item">
                                <div class="dropdown">
                                    <a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown" href="#">Informacje</a>
                                    <div style="background-color:dimgrey"class="dropdown-menu">
                                        <a class="dropdown-item" href="Historia.html">Historia</a>
                                        <a class="dropdown-item" href="#">Geografia</a>
                                        <a class="dropdown-item" href="#">Środowisko</a>
                                        <a class="dropdown-item" href="#">Kartografia Archiwalna</a>
                                        <a class="dropdown-item" href="#">Galeria Fotografii</a>
                                    </div>
                                </div>  
                            </li>
                            
                            <li class="nav-item">
                                <a class="nav-link" href="#">Filmy</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Artykuły prasowe</a>
                            </li>
                            <li class="kontakt nav-item">
                                <a class="nav-link" href="kontakt.html">Kontakt</a>
                            </li>   
                        </ul>
                        </div>
                    </nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。