slideToggle（）不會在上滑動或下滑動畫

我正在使用下拉菜單。問題是，當菜單項被點擊並且菜單應該向下滑動時，它會打開得太晚而不會動畫。當它滑動時，它也不會生成動畫。slideToggle（）不會在上滑動或下滑動畫

$('.menu-vertical .nav-menu > li').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).find('ul').slideToggle('2000', 'swing'); 
 
});

.menu-vertical .nav-menu li ul { 
 
    position: relative; 
 
    background: #f5f5f5 !important; 
 
    top: 0; 
 
    display: none; 
 
    transition: all .4s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="menu-vertical"> 
 
    <ul class="nav-menu"> 
 
    <li>this is head 
 
     <ul> 
 
     <li>this is one</li> 
 
     <li>this is one</li> 
 
     <li>this is one</li> 
 
     <li>this is one</li> 
 
     </ul> 
 
    </li> 
 
    <li>head is head</li> 
 
    <li>head is head</li> 
 
    </ul> 
 
</nav>

來源

2015-05-13 muhaimin

呃，「粗魯」和「拉特」是什麼意思？ – freefaller

看到小提琴你會明白 – muhaimin

大聲笑，它對我來說是完美的動畫 – Aaron

塊引用

代碼缺少「$（文件）。就緒（）」事件處理程序。

$(document).ready(function() { //forgot this very important 
 
    $('.menu-vertical .nav-menu > li').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).find('ul').slideToggle(2000, 'swing'); 
 
    }); 
 
});

.menu-vertical .nav-menu li ul { 
 
    position: relative; 
 
    background: #f5f5f5 !important; 
 
    top: 0; 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <nav class="menu-vertical"> 
 
    <ul class="nav-menu"> 
 
     <li>this is head 
 
     <ul> 
 
      <li>this is one</li> 
 
      <li>this is one</li> 
 
      <li>this is one</li> 
 
      <li>this is one</li> 
 
     </ul> 
 
     </li> 
 
     <li>head is head</li> 
 
     <li>head is head</li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

來源

2015-05-13 14:13:59

忘記添加document.ready功能 –

不要在評論中說...讓你的答案...否則人們必須弄清楚代碼 – freefaller

@freefaller它在我的代碼 –

它看起來像問題可能出在你的CSS競爭過渡。

此外幻燈片的時間應該是一個數字而不是一個字符串。當作爲字符串傳遞時，您將獲得默認的400毫秒計時，而不是您想要指定的2000毫秒計時。

$('.menu-vertical .nav-menu > li').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).find('ul').slideToggle(2000, 'swing'); // change '2000' to 2000 
 
});

.menu-vertical .nav-menu li ul { 
 
    position: relative; 
 
    background: #f5f5f5 !important; 
 
    top: 0; 
 
    display: none; 
 
    /*transition: all .4s ease; <- remove this bit*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="menu-vertical"> 
 
    <ul class="nav-menu"> 
 
    <li>this is head 
 
     <ul> 
 
     <li>this is one</li> 
 
     <li>this is one</li> 
 
     <li>this is one</li> 
 
     <li>this is one</li> 
 
     </ul> 
 
    </li> 
 
    <li>head is head</li> 
 
    <li>head is head</li> 
 
    </ul> 
 
</nav>

來源

2015-05-13 14:25:49 apaul

我剛剛爲Riteshk關於轉換的答案添加了一條評論。有趣的持續時間。 jQuery Doc說它應該接受字符串或數字，但是你正確的說它使用了默認的String val提供的。看起來像一個錯誤？ – Daved

@Daved它將接受指定的字符串值，如「慢」或「快」 – apaul

啊，touche。總是使用int，我忘了你可以說「快」或「慢」。 ;） – Daved

menu-vertical .nav-menu li ul { 
 
    position: relative; 
 
    background: #f5f5f5 !important; 
 
    top: 0; 
 
    display: none; 
 
    transition: **background** .1s ease-in; 
 
}

這裏是我只在CSS代碼解決方案更改密碼。

這裏的「過渡」你寫「一切」包含附有驗證碼的所有元素會去過渡

強大的文本 ，因爲我知道在轉變特性的第一個參數是一些CSS-物業，所以你只需要只過境那些你想要的財產

欲瞭解更多詳細信息，請點擊此處查看轉換屬性的參考鏈接。

http://www.kirupa.com/html5/all_about_css_transitions.htm

來源

2015-05-14 04:30:07

slideToggle（）不會在上滑動或下滑動畫

回答

相關問題