欢迎访问我的博客,博客正在建设中,如果你有好的建议欢迎来信!!-小酌
当前位置: 首页 > 前端 > javascript

我使用上的第一个JS小功能

小酌子 2018-08-26 22 0

       以前用wordpress的时候老觉的主题不是自己想要的样子,想去修改可又不懂PHP,结果改来改去最后都放弃了。最近心血来潮开始学习前端,就想着用HTML+CSS+Javascript做一个自己的主题,心中的主题应该是两栏布局,并且响应式/自适应(主要是懒,懒得去弄移动端和PC端分离)。
要做响应式那就免不了要用到JS控制低分辨率时候的菜单按钮,实现导航栏的显示与隐藏。刚开始学习javascript,对于语法都还没弄清楚的我来说,还是有点小难度,但是心里还是有十足的把握,毕竟这只是个简单的判断。


第一步:html
首先用HTML创建一个菜单按钮和一个导航列表盒子,方法很多,我这里为了好定位直接内嵌到了按钮里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过JS显示和隐藏盒子</title>
</head>
<body>
    <div id="menu">
        这里是导航按钮
        <div id="sc">
            <ul>
                <a href=""><li>首页</li></a>
                <a href=""><li>前端</li></a>
                <a href=""><li>新闻</li></a>
                <a href=""><li>关于</li></a>
            </ul>
        </div>
    </div>
</body>
</html>

第二步:css样式
这里的样式因为测试所以随便设置的,主查是的把菜单列表默认隐藏起来 display: none;
<style>
        #menu {
            position: relative;
            background: black;
            width: 150px;
            height: 30px;
            margin: 200px auto;
            color: white;
            cursor: pointer;
        }

        #sc {
            display: none;
            position: absolute;
            background-color: red;
            width: 150px;
            height: 120px;
            top: 30px;
            left: 0;
        }
</style>

第三步:JS部份
先用document.getElementById('');引入导航按钮和列表,接着定义一个布尔变量(通过布尔的值来判断菜单列表是显示状态还是隐藏状态)。 然后事件函数,用if判断状态为真还是假,然后做不同的赋值,让菜单列表显示和隐藏。
<script type="text/javascript"></pre>
        var menu = document.getElementById('mobenav'); //定义导航按钮变量
        var sc = document.getElementById('mobelist'); //定义需要控制的菜单列表
        var i = true; //用布尔判断显示和隐藏状态
        menu.onclick = function () {   //点击事件
            if (i) {
                sc.style.display = "block";
                i = false;
            } else {
                sc.style.display = "none";
                i = true;
            }
        }
    </script>


完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过JS显示和隐藏盒子</title>
    <style>
        #menu {
            position: relative;
            background: black;
            width: 150px;
            height: 30px;
            margin: 200px auto;
            color: white;
            cursor: pointer;
        }

        #sc {
            display: none;
            position: absolute;
            background-color: red;
            width: 150px;
            height: 120px;
            top: 30px;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="menu">
        这里是导航按钮
        <div id="sc">
            <ul>
                <a href=""><li>首页</li></a>
                <a href=""><li>前端</li></a>
                <a href=""><li>新闻</li></a>
                <a href=""><li>关于</li></a>
            </ul>
        </div>
    </div>
    <script>
        var menu = document.getElementById('menu');
        var sc = document.getElementById('sc');
        var i =true;
        menu.onclick = function () {
            if(i){
                sc.style.display = "block";
                i = false;
            }else{
                sc.style.display = "none";
                i = true;
            }
        }
    </script>
</body>
</html>

版权声明:除作者特别注明外,本站所有文章均为作者个人原创

转载请注明:出处 Récit | 怡然自酌 我使用上的第一个JS小功能

回到顶部