滑动下拉菜单之js

最新推荐文章于 2018-09-25 13:52:49 发布

xiaowuguiliang

最新推荐文章于 2018-09-25 13:52:49 发布

阅读量846

点赞数

分类专栏：前端文章标签：动态菜单

本文链接：https://blog.csdn.net/xiaowuguiliang/article/details/81358139

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细讲解如何利用JavaScript技术实现动态的滑动下拉菜单效果，涵盖菜单的创建、事件监听以及动画效果的添加，助你打造交互丰富的网页导航体验。

摘要由CSDN通过智能技术生成

//初始化下拉菜单事件代码
$scope.$on("ngRepeatFinished", function (repeatFinishedEvent, element){
  //在show方法调用时刻立即触发（尚未显示执勤）
    $('.dropdown').on('show.bs.dropdown', function() {
       var dropdownToggle = $(this).find(".dropdown-toggle");
       var dropdownMenu = $(this).find(".dropdown-menu");
       var addItem={};
      if(dropdownToggle.offset().left>1000){
        addItem = dropdownMenu.clone(true)
          .css({
            "position": 'absolute',
            "left": (dropdownToggle.offset().left - dropdownMenu.outerWidth()+dropdownToggle.outerWidth()) + "px",
            "top": (dropdownToggle.offset().top + dropdownToggle.outerHeight()) + "px",
            "display":'block'
          });
      }else{
        addItem = dropdownMenu.clone(true)
          .css({
            "position": 'absolute',
            "left": dropdownToggle.offset().left + "px",
            "top": (dropdownToggle.offset().top + dropdownToggle.outerHeight()) + "px",
            "display":'block'
          });
      }
       $('body').append(addItem);
       addItem.unbind('mouseleave').bind('mouseleave',function(){
           dropdownToggle.dropdown('toggle');
       });
       dropdownMenu.detach();
   });
  //在hide方法调用时（但还未关闭隐藏）立即触发
  $('.dropdown').on('hidden.bs.dropdown', function() {
     var dropdownMenu=$("body>.dropdown-menu");
     var addItem = dropdownMenu.clone(true);
     $(this).append(addItem);
     dropdownMenu.detach();
   });

  $('.dropdown').hover(function(){
      var dropdownMenu = $("body>.dropdown-menu");
      if(dropdownMenu.length == 0 || $(this).attr('dpnum') != dropdownMenu.attr('dpnum')){
        $(this).find('.dropdown-toggle').dropdown('toggle');
      }
   },function(e){
       //console.log(e.toElement.className);
       if(e.toElement.className == "dropdown-menu" ||
       $(e.toElement).closest(".dropdown-menu").length != 0){
         return;
       }else{
         $(this).find('.dropdown-toggle').dropdown('toggle');
       }
   });
});