如何用jquery實現(xiàn)下拉菜單

這篇“如何用jquery實現(xiàn)下拉菜單”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何用jquery實現(xiàn)下拉菜單”文章吧。

方法：1、利用兩個div元素設(shè)置一級元素與二級元素；2、給一級元素添加click點擊事件并利用slideToggle設(shè)置事件處理函數(shù)，語法為“一級元素對象.click(function(){二級元素對象.slideToggle();})”。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。

怎么用jquery實現(xiàn)下拉菜單

1、首先，在hbuilder里面書寫兩個div標簽，并且給它們各取一個id名稱，這里我就分別設(shè)置它們的id名稱為one和onemenu。

接著我們設(shè)置id為one的css樣式，這里我就設(shè)置成天藍色。

之后，我們再來設(shè)置onemenu的css樣式，為了區(qū)別開來，我設(shè)置它為紅色。

之后，我們來預(yù)覽一下效果，可以看到，有天藍色和紅色兩部分，接著我們要做的就是鼠標點擊藍色部分的，紅色部分的會往上折疊，而再次點擊藍色部分，紅色部分就會往下移動。

2、接著使用jQuery方法來給one所在的div綁定一個click事件。然后給click綁定一個匿名函數(shù)。

然后在匿名函數(shù)里面寫上方法，jQuery現(xiàn)在我來解釋一下這條語句，jQuery表示獲取到id為onemenu的div元素，當(dāng)觸發(fā)事件時，元素就會調(diào)用slideToggle方法。slideToggle可以設(shè)置時間，這里我就設(shè)置成3000毫秒，相當(dāng)于3秒。

<script>
$(document).ready(function(){
$("#one").click(function(){
$("#onemenu").slideToggle(3000);
});
});
</script>

這樣，當(dāng)我們點擊藍色部分時，紅色部分就會慢慢上滑隱藏，而再次點擊時就會慢慢下滑顯示。這里因為是靜態(tài)圖片所以無法看到滑動效果，大家可以練習(xí)看看效果。

以上就是關(guān)于“如何用jquery實現(xiàn)下拉菜單”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。