Question

我只是从开发Web开始，所以很抱歉，如果我的问题很琐碎。

我正在使用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>

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

Answer 1

您没有ID为kontakt的元素，但是可以使用document.querySelector('.className')通过其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>

Answer 2

您是否尝试过css脚本，例如

  <style>
       #your_div{
           max-height: set the height you want here, like 150px;
       }
  </style>

然后运行JavaScript代码以检查div的高度，如果div的高度超过或等于div的高度，请使用.append添加带有

的按钮

<button onclick="my_function()" value="Give Me More Content">
 <script>
      function my_function(){
           $.("#your_div").style("max-height", "1000px (this could be any number)");
      }
 </script>

只是一个主意，但希望对您有所帮助

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

2 个答案: