导航栏 jQuery 和 native JS

niceforbear 发布于2019-08-22 10:59 / 420人阅读

摘要：最近在练习原生，于是想把几个月之前用写的一个导航的功能，用原生实现一遍。写不到一年，没做兼容，求大神轻喷，有写的不好的，求指教为展开用时为收起用时

最近在练习原生JS，于是想把几个月之前用jQuery写的一个导航的功能，用原生JS实现一遍。

写JS不到一年，没做IE8兼容，求大神轻喷，有写的不好的，求指教~~

jQuery：

$(".navigation li").addClass("displayNone");

$(".nav_icon").click(function(){
    open_nav();
    return false;
});

$(window).click(function(){
    close_nav();
});
  
function open_nav(){
    $(".navigation").removeClass("displayNone");
    $(".navigation").css("visibility","hidden");
    $(".navigation li").each(function(i){
        var nav_li = $(this);
        setTimeout(function(){
            nav_li.slideDown("fast"); 
        },100+100*i);
        
    });
    $(".navigation").css("visibility","visible");
}

function close_nav(){
    var li_count = $(".navigation li").length;
    $(".navigation li").each(function(i){
        var nav_li = $(this);
        setTimeout(function(){
            nav_li.slideUp("fast");
        },100*li_count-100*i);
    });
}

native JS (IE9+):

var Navigation = function(){
    var el = this.el = document.getElementsByClassName("navigation")[0];

    var getCurrentHeight = function(){
        if(window.getComputedStyle){
            return window.getComputedStyle(el,null).height;
        }else if(el.currentStyle){
            return el.currentStyle.height;
        }else{
            return el.offsetHeight;
        }
    };

    var navHeight = parseInt(getCurrentHeight());

    this.openList = function(speed){ //speed为展开用时
        el.style.visibility = "visible";
        var currentHeight = document.getElementsByClassName("navigation")[0].style.height = 0;
        var openTimer = setInterval(function(){
            currentHeight += navHeight*(10/speed);
            el.style.height = currentHeight + "px";
            if(currentHeight >= navHeight){
                el.style.height = navHeight + "px";
                   clearInterval(openTimer);
            }
        },10);
        navStatus ++;
    };
    this.closeList = function(speed){ //speed为收起用时
        var currentHeight = parseInt(getCurrentHeight()) ;

        var closeTimer = setInterval(function(){
            currentHeight -= navHeight*(10/speed);
            el.style.height = currentHeight + "px";
            if(currentHeight <= 0){
                el.style.height = "0px";
                clearInterval(closeTimer);
            }
        },10);
        navStatus = 0;
    };
}

var navigation = new Navigation();
var navStatus = 0;

document.getElementsByClassName("nav_icon")[0].onclick = function(e){
    if(navStatus == 0){
        navigation.openList(450);
        window.event ? window.event.cancelBubble = true : e.stopPropagation();
    }else{
        navigation.closeList(450);
    }
}    
window.onclick = function(){
    navigation.closeList(450);
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91583.html

手把手教你如何自定义 React Native 底部导航栏

摘要：在本指南中，我将向你演示如何创建自定义标签栏以并与一起使用。我们将导入并使用创建默认选项卡导航器。接下来，我们将添加实际的自定义标签栏组件。例如，当前的实现假设选项卡导航器中总会有个，聚光灯颜色在选项卡栏组件中是写死。如果你觉得 React Navigation 默认 Tab 组件看起来太平淡，或者想创造一些更现代的东西，那么你想法就和我一样。在本指南中，我将向你演示如何创建自定义...

LiuZh 2019-08-23 16:57 评论0 收藏0
加推Weex实践之路（上）

摘要：我们参考小程序的设计思路进行了优化升级，为每一个需要特有化配置的页面添加一个格式的配置文件，配置文件包括导航栏的配置页面级别的配置跳转的配置等，将配置工程化标准化。设置导航栏按钮包含按钮样式的数组通过完成按钮事件的回调。一、背景1.为什么是Weex在公司快速发展的大环境下，App的更新迭代高速、高频，技术团队平均两周便可诞生一款中型App，但App团队只有6个人（iOS 、Android各3...

shuibo 2019-05-22 19:43 评论0 收藏0
【布局篇】react-native

摘要：简介这里以三种经典布局来讲解布局概念，主要以为主，中有两个基本元素与，分别类似于端和，用于布局和修饰。简介这里以三种经典布局来讲解react-native布局概念，主要以flexbox为主，react native中有两个基本元素< View >与< Text >，分别类似于web端div和span，用于布局和修饰。需要注意的是，react native不是所有的CSS属性都支持，...

WalkerXu 2019-08-19 17:13 评论0 收藏0
React Native 简介：用 JavaScript 搭建 iOS 应用(2)

摘要：分别命名文件为和。上述代码指定了当某列书籍被点击时响应一个回调函数。当组件的值改变时例如用户键入一些文本，将会调用组件，同时为组件指定一个回调函数。在调用时，回调函数和利用用户输入的数据将设置和属性。【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，作者介绍通过 React N...

n7then 2019-08-21 10:37 评论0 收藏0