css的知识点

热心的社会主义接班人

发布于 2019-08-16 17:09:04

5500

发布于 2019-08-16 17:09:04

文章被收录于专栏：cs

水平导航栏有两种方法创建横向导航栏。使用内联(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中