如果屏幕尺寸大于

Question

如果您查看我的网站www.biblio-tech.nl，您会发现，一旦您的鼠标离开菜单栏，元素就会消失，这是由 Jquery 脚本为移动版制作手风琴导航造成的。

因此，当您将窗口大小调整为手机/平板电脑宽度时，导航一旦调整大小就可以了，它就消失了..

<div class="navbar">
<a id="nav-toggle"><span></span></a>
<div class="navwrapper">
          <div id="dropMenu">
            <ul class="level1-menu">
              <li><a href="#">3d printing</a>

                <ul class="level2-menu" id="1">
                  <li><a href="3d.html">blueprints</a>
                    <ul class="level3-menu">
                      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                    </ul>
                  </li>
                      <li><a href="3d.html">information</a>
                        <ul class="level3-menu">
                          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                        </ul>
                      </li>
                         <li><a href="3d.html">software</a>
                            <ul class="level3-menu">
                              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                            </ul>
                          </li>
                </ul>

              </li>

              <li><a href="#">computing</a>

                <ul class="level2-menu" id="2">
                  <li><a href="3d.html">hardware</a>
                    <ul class="level3-menu">
                      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                    </ul>
                  </li>
                      <li><a href="3d.html">information</a>
                        <ul class="level3-menu">
                          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                        </ul>
                      </li>
                         <li><a href="3d.html">software</a>
                            <ul class="level3-menu">
                              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                            </ul>
                          </li>
                </ul>

              </li>

              </li>
              <li><a href="#">visuals</a></li>
            </ul>
                </div>


</div>
</div>

HTML

@media screen and (min-width: 280px) and (max-width: 900px){

.navwrapper{
position: relative;
top: 19%;
right: 0;
width: 100%;
}


.navbar {
  position: fixed;
  height: 3em;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}
#nav-toggle { 
  position: absolute;
  right: 10px;
  top: 25%; 
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: rgba(254,254,254,0.9);
  position: absolute;
  display: block;
  content: '';
  opacity: 0.9;
}

#nav-toggle span:before {
  top: -10px; 
}

#nav-toggle span:after {
  bottom: -10px;
}
#dropMenu{
display: none;
position: relative;
width: 60%;
background-color: rgba(0,0,0,0.5);
top: 100%;
right: -20%;
padding: 0;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
border-radius: 0 0 0 10px;
}

#dropMenu li{
  list-style-type : none;
}
#dropMenu ul{
  padding : 5px;
}

#dropMenu ul li{
  border-bottom: 1px solid rgba(254,254,254,0.1);
}

#dropMenu ul ul li{
  font-size: 80%;
  opacity: 0.8;
}

#dropMenu ul ul li:last-child{
  border-bottom: none;
}

#dropMenu ul ul li:first-child{
  border-top: 1px solid rgba(254,254,254,0.1);
}

ul.level1-menu  li a {
    text-decoration: none;
    color: rgba(254,254,254,1);
    font-weight: 100;
    font-size: 160%;
}

.level2-menu,.level3-menu{
  display : none;
}
}

以上适用于手机/平板电脑

@media screen and (min-width: 900px) and (max-width: 1600px){
.navbar {
width: 100%;
height: 4.5em;
font-weight: 100; 
position: fixed;
background-color: rgba(0,0,0,0.5);
z-index: 100;
}

    .navwrapper {
width: 100%;
height: 4.5em;
position: absolute;
z-index: 100;
left: 5%;
}

    .navbar ul {
    position: relative;
    display: inline-block ;
    list-style: none;
    font-size: 210%;
    }

    .navbar ul li {
    display: inline-table;
    width: 4.9em;
    height: 1.7em;
    margin: 15px 30px;
    color: rgba(254,254,254,0.8);
    }

    .navbar ul ul {
    position: absolute;
    display: none;
    font-size: 80%;
    top: 83%;   
    width: 60%;
    }

    .navbar ul li:hover ul  {
    display: block;
    }

    .navbar ul ul li {
    position: relative ;
    min-width: 60%;
    height: 1%;
    margin: 0 0;
    background: rgba(0,0,0,0.5);
    letter-spacing: 1px;
    text-indent: 10px;
    }

    .navbar ul ul li:hover {
    background-color: rgba(0,0,0,0.7)
    }

    .navbar ul li a {
    display: block;
    text-decoration: none;
    color: rgba(254,254,254,0.8);
    }

    .navbar ul li a:hover {
    opacity: 1;
    }


    .navbar ul ul ul {
    position: absolute;
    left: 100%; 
    top: 0;
    color: white;
    width: 120%;
    font-size: 60%;
    letter-spacing: 1px;
    }

    .navbar ul ul ul li {
    display: none;
    padding: 5px;
    text-indent: 0px;
    border-radius: 0px 15px 15px 15px;
    background-color: rgba(0,0,0,0.7);
    }


    .navbar ul ul li:hover > ul li {
    display: block;
    }

    li:last-child {
    border-radius: 0px 0px 10px 10px;
    }

    li:last-child:hover {
    border-radius: 0px 0px 0px 10px;
    }
    }

这是用于桌面的

$(document).ready(function(){
    $("#nav-toggle").click(function(){
    event.preventDefault();
        $("#dropMenu").slideToggle(1);
    });

        $(".level1-menu > li > a").click(function(){            
        event.preventDefault();
            $(this).siblings(".level2-menu").slideToggle(".level2-menu");
        });


            $("#dropMenu").mouseleave(function(){
            event.preventDefault();
                $("#dropMenu, .level2-menu").slideUp(1);
            });
});

我想知道如果屏幕尺寸低于 1300 像素，是否有某种方式只加载脚本；

或者其他一些方法来防止这种情况发生，如果你需要更多我的代码，我可以把它放进去！

提前感谢您花时间帮助我。

真诚的问候，

锤子雷蒙德

Answer 1

如果（无论其他条件 && screenWidth

$(document).ready(function(){
$("#nav-toggle").click(function(){
event.preventDefault();
    $("#dropMenu").slideToggle(1);
});

    $(".level1-menu > li > a").click(function(){            
    event.preventDefault();
        $(this).siblings(".level2-menu").slideToggle(".level2-menu");
    });


       $("#dropMenu").mouseleave(function()
                                                                                      {
        event.preventDefault();
         if (screenWidth < 1000){
            $("#dropMenu, .level2-menu").slideUp(1);}
        });

});

笔链接：http://codepen.io/damianocel/pen/qZPLGQ

Answer 2

由于使用的是 jQuery，所以可以使用 resize 方法。

$( window ).resize(function() {
 if($(window).width() <= 500){ // example
    //do stuff here
 }
});