Question

我刚刚制作了一个移动导航栏，并希望添加一个过渡到它，以便它比当前慢下来。

这是我的jquery：

(function( $ ){   
   $(document).ready(function(){
       $(".burguer-nav").on("click", function(){
          $("header nav ul").toggleClass("open"); 
       }); 
   });    
})(jQuery);

和css：

span.burguer-nav {
    display: none;
}
@media only screen and (max-width: 845px){
    .main-navigation li a {
        display: block;
        text-align:center;
    }
    .burguer-nav{
        display: block !important;
        height: 40px;
        cursor: pointer;
        font-size: 18pt;
    }
    header nav ul{
        overflow:hidden;
        height:0;
        background-color: #505050;
    }
    header nav ul.open{
        height:auto;
    }
}

我如何以及在何处添加转换？

Answer 1

@media only screen and (max-width: 845px){
    .main-navigation li a {
        display: block;
        text-align:center;
    }
    .burguer-nav{
        display: block !important;
        height: 40px;
        cursor: pointer;
        font-size: 18pt;
    }
    header nav ul{
        overflow:hidden;
        max-height:0;
        background-color: #505050;
        transition: all 0.3s ease-in-out;
    }
    header nav ul.open{
        max-height: 10000px;
    }
}

您无法在高度属性中设置转场。试试这个。夸大最大高度并不会影响应用程序的性能。

Answer 2

你可以使用slideToggle方法而不是toggleClass，我在这里编辑过代码请检查 see example here

(function ($){
  $(document).ready(function(){
  $(".burguer-nav").on("click", function(){
      $("header nav ul").slideToggle("slow");
   });

}）; }）

如何将转换添加到导航栏下拉列表

2 个答案: