FMJ.me

FMJ.me

一个靠自学的菜鸟,只会html+css,JavaScript是什么鬼?vue.js?php?学不动学不动...

工作室 联系QQ

冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

Powered By wordpress ,Theme By 天兴工作室

入js坑之:js点击显示再点击隐藏的效果

fmj 发布于 2016年05月26日 67 浏览 0 评论


今天写一个模板里面需要有一个商品的条件查询版块,就是列出来很多商品属性让用户点击选择的东西。

其中有一个需求是:初始板块排列只显示一行,有一个“更多”按钮,点击后显示出所有。

然后就只能又开始硬着头皮写js了...

初始成果如下:

function ces(){
    var divContainer=document.getElementById('zxxgnone3');
    if(divContainer.style.height==""||divContainer.style.height=="30px"){
        divContainer.style.height="auto";
    }else{
        divContainer.style.height="30px";
    }
}

然后html里面直接onclick="ces()"。

但是我马上发现一个页面需要有多个这种效果,连js的门都没摸到的我顿时懵逼了,在群里求助得到的答案是”传值“,传值后的代码如下:

function ces(id){
    var divContainer=document.getElementById(id);
    if(divContainer.style.height==""||divContainer.style.height=="30px"){
        divContainer.style.height="auto";
    }else{
        divContainer.style.height="30px";
    }
}

html页面调用代码为onclick="ces('指定的id值')"。

弄完之后就觉得html和css对比起js来,简直是。。。

js的各种属性太多了!只好慢慢学。

Tags:
×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

Powered By wordpress ,Theme By 天兴工作室

导航 关灯 背景 顶部

纯色背景

图片背景