從上面可以看出，兩個問題，第一：下拉出現的太快太突然，第二：再點擊下一個下拉菜單的時候，上一個不會閉合，針對這兩個問題，接下來會一 一解決。
解決下拉太快：
js中有個jquery效果，有一個效果是jquery滑動，slideUp()==>>像上滑動，相反的slideDown（）===>>向下滑動，這個便可以代替，
但是效果是點擊a鏈接，針對a鏈接下的下拉菜單ul添加這種效果，所以需要先找到這個ul元素。
<script>
//........
var ul = $(this).siblings('ul');//遍歷a元素的兄弟元素（限制為ul）
</script>
然后再添加slideUp（），用來點擊超鏈接的時候向上收起菜單，添加slideDown（），用來再次點擊的時候向下展開菜單。
代碼如下：
<script>
$(function () {
$('.submenu>a').click(
function (e) {
e.preventDefault();//阻止點擊a的默認動作
var li = $(this).parents('li');
var ul = $(this).siblings('ul');//遍歷a元素的兄弟元素（限制為ul）
if (li.hasClass('open')){ //假如有open類，移除
ul.slideUp();
li.removeClass('open')
}else{ //否則添加open類
ul.slideDown();
li.addClass('open')
}
}
)
})
</script>
這樣第一個問題我們就解決了。（注意，這里的css樣式： .submenu >ul{display: none;}不能刪除，這里的樣式所起到的作用有兩個，一個是點擊的隱藏菜單（這個用slideUp效果代替了，但是他還有一個作用就是在一開始隱藏塊元素ul。））
卡頓為制作圖片的問題，與效果無關。
從上面可以看出，下拉已經可以不是那么的突兀了，接下來解決第二個問題：只展現一個下拉菜單，多的即隱藏。
這個也是js的任務。要整個導航欄或者面板只展現一個下拉菜單，那么就要針對整個一級目錄對象和整個二級目錄對象，同樣我們要先找到所有的一級、二級目錄。
<script>
//........
var li_s = $('#sidebar .submenu');//一級目錄
var ul_s = $('#sidebar .submenu >ul');//二級目錄
</script>
整個思路是這樣的：首先一開始默認所有的li都沒有open類，點擊一個添加open類，用下滑的方式顯示。再點擊取消open類，但是當我們點擊兩個都沒有的li的時候，兩個li都將添加open類從而顯示出來。所有我們在添加open類顯示的時候，為了避免污染就需要，統一先把所有的下拉菜單收起來，所有的一級li的open類移除，再為點擊的那個鏈接添加open類。
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉</title>
<style>
.submenu >ul{
display: none;
}
.open>ul{
display: block;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li class="submenu">
<a>首頁</a>
<ul>
<li><a>首頁內容1</a></li>
<li><a>首頁內容2</a></li>
<li><a>首頁內容3</a></li>
</ul>
</li>
<li>
<a>內容</a>
</li>
<li class="submenu">
<a>新聞</a>
<ul >
<li><a>新聞1</a></li>
<li><a>新聞2</a></li>
<li><a>新聞3</a></li>
<li><a>新聞4</a></li>
<li><a>新聞5</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$('.submenu>a').click(
function (e) {
e.preventDefault();//阻止點擊a的默認動作
var li = $(this).parents('li');
var li_s = $('#sidebar .submenu');//所有.submenu的li目錄
var ul_s = $('#sidebar .submenu >ul');//所有.submenu 的下級ul目錄
var ul = $(this).siblings('ul');//遍歷a元素的兄弟元素（限制為ul）
if (li.hasClass('open')){ //假如點擊的那個鏈接有open類，那么下拉菜單向上滑動，移除open類
ul.slideUp();
li.removeClass('open');
}else{ //假如點擊的那個鏈接沒有open類，首先對所有的下拉菜單都讓其收起來。然后點擊的那個下拉，所有的li目錄移除open類，點擊的那個添加open類
ul_s.slideUp();
ul.slideDown();
li_s.removeClass('open')
li.addClass('open')
}
}
)
})
</script>
</body>
</html>
效果圖如下：
