外贸建站之jQuery+bootstrap响应式二级下拉导航菜单代码分享

外贸建站之jQuery+bootstrap响应式二级下拉导航菜单代码分享

jQuery+bootstrap响应式二级下拉导航菜单代码是一款非常简单实用的企业网站导航下拉菜单展开收缩特效,电脑端和移动端效果都不错。

 1 <script>
 2         $(function(){
 3             //超过一定高度导航添加类名
 4             var nav=$("header"); //得到导航对象  
 5             var win=$(window); //得到窗口对象  
 6             var sc=$(document);//得到document文档对象。  
 7             win.scroll(function(){  
 8               if(sc.scrollTop()>=100){  
 9                 nav.addClass("on");   
10               }else{  
11                nav.removeClass("on");  
12               }  
13             })   
14 
15             //移动端展开nav
16             $('#navToggle').on('click',function(){
17                 $('.m_nav').addClass('open');
18             })
19             //关闭nav
20             $('.m_nav .top .closed').on('click',function(){
21                 $('.m_nav').removeClass('open');
22             })
23             
24             //二级导航  移动端
25             $(".m_nav .ul li").click(function() {
26                 $(this).children("div.dropdown_menu").slideToggle('slow')
27                 $(this).siblings('li').children('.dropdown_menu').slideUp('slow');                
28             });
29 
30         })
31     </script>

本文参考:https://www.chinaobd2.com/wholesale/cgdi-at-200-ecu-programmer-for-bmw.html
            https://www.chinaobd2.com/wholesale/autel-maxiim-im508-immo-key-programmer.html

猜你喜欢

转载自www.cnblogs.com/aid12580/p/10680649.html
今日推荐