专栏首页cscss的知识点

css的知识点

水平导航栏 有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

这两种方法都很好,但如果你想链接到具有相同的大小,你必须使用浮动的方法

image.png

image.png

image.png

image.png

 // 下拉框点击事件
        function dropClick(dom){
            // 切换样式状态
            if(dom.className.indexOf("to__roate") > -1){
                dom.className = ""
            }
            else{
                dom.className = "to__roate"
            }
            
            // 显示隐藏内容
            var domShow = dom.parentNode.parentNode.nextElementSibling
            if(domShow.className.indexOf("to__show") > -1){
                domShow.className = "to__subItem"
            }
            else{
                domShow.className = "to__subItem to__show"
            }
        }

对应的css分别为

.to__block .to__left>div .to__subItem {
    padding-left: 20px;
    display: none;  //主要这个属性控制显示
}
.to__block .to__left>div .to__show {
    display: block;
}

.to__block .to__left .to__item .to__dropdownList i svg { position: absolute; z-index: 2; }

 // 节点单击事件
        function domClick(e){
            // 选中子元素所有input框
            var subItem = e.parentNode.nextElementSibling
            var inputList = subItem.querySelectorAll(".to__item")
            for(var i = 0; i < inputList.length; i++){
                var item = inputList[i]
                item.querySelector("input").checked = !e.querySelector("input").checked
                var subName = item.querySelector(".to__name").innerHTML
            }

这个单击事件对输入框和标签都有效因为,单击事件在span中

image.png

div的 display: inline-block; 改变了盒子的样式

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python的选择结构

    python的逻辑运算符:and(逻辑与),or(逻辑或),not(逻辑非). 和其它语言与[&&],或[||],非[!]不一样,感觉有些怪。 >>> not...

    东风冷雪
  • Mathematica学习笔记

    放假了,近来无事,就复习了一下mathematica相关知识点。已经玩了很多东西,不过大概还是很熟悉。 Mathematica(我简称mma),可以通过交互方...

    东风冷雪
  • 农村义务教师

    东风冷雪
  • 使用Apache Server 的ab进行web请求压力测试

    参考:http://www.cnblogs.com/spring3mvc/archive/2010/11/23/2414741.html 自己写代码经常是顺着逻...

    Ryan-Miao
  • C++核心准则C.152:永远不要将派生类数组的指针赋值给基类指针

    Subscripting the resulting base pointer will lead to invalid object access and p...

    面向对象思考
  • 通过共分割实现基于涂鸦的域自适应

    中文摘要:虽然深卷积网络在许多医学图像分割任务中已经达到了最先进的性能,但它们通常表现出较差的泛化能力。为了能够从一个领域(例如,一种成像模式)归纳到另一个领域...

    用户7454122
  • Tracking Emerges by Colorizing Videos

    Carl Vondrick , Abhinav Shrivastava , Alireza Fathi , Sergio Guadarrama ,Kevin M...

    用户1908973
  • Rails应用分页: Will Paginate

    用户2183996
  • 乐器分类的端对端对抗性白盒攻击行为(CS SD)

    对输入数据的小规模对抗性扰动会在很大程度上改变机器学习系统的性能,从而对这种系统的有效性提出挑战。我们提出了第一个针对乐器分类系统的端到端对抗性攻击,允许直接在...

    Rosalie
  • 使用WebAssembly和Go编写前端Web框架

    JavaScript Frontend frameworks have undoubtedly helped to push the boundaries of...

    李海彬

扫码关注云+社区

领取腾讯云代金券