Question

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

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

<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);
            });
});

我想知道如果屏幕大小低于1300px，脚本只会加载某种方式;

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

提前感谢您投入时间帮助我。

真诚的问候，

Raymond the Hammer

Answer 1

if（无论其他条件＆amp;＆amp;＆amp; screenWidth＆lt; 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

Answer 2

由于您正在使用jQuery，因此可以使用resize方法。

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

如果屏幕大小超过，请停止JQUERY脚本

2 个答案: