jquery - 如果屏幕大小超过，则停止 JQUERY 脚本

Question

如果你看看我的网站www.biblio-tech.nl您会看到，一旦您的鼠标离开菜单栏，元素就会消失，这是由 Jquery 脚本为移动版本制作 Accordion 导航引起的。

因此，当您将窗口的大小调整为移动/平板电脑的宽度时，导航就可以了，只要您调整它的大小，它就消失了..

<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 < 1300) {}

$(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