<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
body{
font-size: 12px!important
}
.box{
width: 66px
margin:66px auto
}
/* 一级li样式 */
li{list-style: none}
.yijimulu{
width: 66px
height: 24px
display: flex
justify-content: center
align-items: center
box-sizing: border-box
background-color: orange
color: #333333
position: relative
cursor: pointer
}
/* 二级ul样式 */
.erjiul{
position: absolute
top: -1px
left: 65px
display: none
}
.erjili,.sanjiLi{
width: 66px
height: 24px
display: flex
justify-content: center
align-items: center
box-sizing: border-box
background-color: orange
color: #333333
position: relative
cursor: pointer
}
.sanjiul{
position: absolute
top: -1px
left: 65px
display: none
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var obox = document.querySelector('.box')
function Message(box) {
this.box = box
// 创建一级目录方法
this.CreatOne()
// 创建二级目录方法
this.CreatTwo()
// 创建三级目录
this.CreatThree()
}
// 创建一级目录
Message.prototype.CreatOne = function (){
// 创建一级ul
this.ul = document.createElement('ul')
// 创建一级li
this.ul.innerHTML = `
<li>一级目录</li><li>一级目录</li><li>一级目录</li><li>一级目录</li><li>一级目录</li>
`
// 添加一级ul到div内
this.box.appendChild(this.ul)
// console.log(this.ul)
// 获取一级ul内所有li并起名
this.oli = this.ul.querySelectorAll('li')
// 循环出一级ul内所有li并起名设置样式
for (let i = 0i <this.oli.lengthi++) {
this.oli[i].className = 'yijimulu'
// 设置一级样式鼠标划入效果
this.oli[i].addEventListener('mouseenter',()=>{
// 清空一级目录鼠标移入效果
for(let i = 0i <this.oli.lengthi++) {
this.oli[i].style.border = 'none'
this.oli[i].style.color = '#333333'
this.bulname[i].style.display = 'none'
}
this.oli[i].style.border = '1px solid red'
this.oli[i].style.color = 'white'
this.bulname[i].style.display = 'block'
},false)
// 设置一级目录鼠标移出效果
this.oli[i].addEventListener('mouseleave',()=>{
this.oli[i].style.border = 'none'
this.oli[i].style.color = '#333333'
this.bulname[i].style.display = 'none'
},false)
}
}
// 创建三级目录
Message.prototype.CreatTwo = function () {
// this.oli是一级子li目录
// 创建二级目录ul
this.bul = document.createElement('ul')
// 添加到一级li里 >this.oli
for (let i = 0i <this.oli.lengthi++) {
this.oli[i].innerHTML = '一级目录<ul></ul>'
}
// 获取所有二级ul
this.bulname = this.ul.querySelectorAll('ul')
for (let i = 0i<this.bulname.lengthi++){
// 给二级ul起名
this.bulname[i].className = 'erjiul'
// 创建二级li
this.bulname[i].innerHTML = `<li>二级目录</li><li>二级目录</li><li>二级目录</li><li>二级目录</li><li>二级目录</li>`
this.bli = this.bulname[i].querySelectorAll('li')
// console.log(this.bli)
for (let i = 0i<this.bulname.lengthi++) {
this.bli[i].className = 'erjili'
}
}
// 获取所有二级Ul下的li
// 先通过所有二级ul的类名获取到所有的二级ul
}
// 创建三级目录
Message.prototype.CreatThree = function () {
// 先获取到所有的二级li
this.twoli = this.ul.querySelectorAll('.erjili')
// console.log(this.twoli)
// 创建三级<ul>
for (let i = 0i<this.twoli.lengthi++) {
// console.log(this.twoli)
this.twoli[i].addEventListener('mouseenter',()=>{
// console.log(this.twoli[i])
for(let i = 0i<this.twoli.lengthi++){
this.twoli[i].style.border = 'none'
this.twoli[i].style.color = '#333333'
this.culclass[i].style.display = 'none'
}
this.twoli[i].style.border = '1px solid red'
this.twoli[i].style.color = 'white'
this.culclass[i].style.display = 'block'
},false)
this.twoli[i].addEventListener('mouseleave',()=>{
this.twoli[i].style.border = 'none'
this.twoli[i].style.color = '#333333'
this.culclass[i].style.display = 'none'
},false)
}
this.cul = document.createElement('ul')
for (let i = 0i<this.twoli.lengthi++) {
this.twoli[i].innerHTML = '二级目录<ul></ul>'
this.culname = this.twoli[i].querySelector('ul')
this.culname.className = 'sanjiul'
this.culname.innerHTML = `<li>三级目录</li><li>三级目录</li><li>三级目录</li><li>三级目录</li><li>三级目录</li>`
// 获取所有三级Li
this.culclass = this.ul.querySelectorAll('.sanjiul')
for (let i = 0i<this.culclass.lengthi++) {
this.cli = this.culclass[i].querySelectorAll('li')
for (let i = 0i<this.cli.lengthi++){
// this.cli = this.culclass[i].querySelectorAll('li')
this.cli[i].className = 'sanjiLi'
}
}
this.threeli = this.ul.querySelectorAll('.sanjiLi')
console.log(this.threeli)
for (let i = 0i <this.threeli.lengthi++) {
this.threeli[i].addEventListener('mouseenter',()=>{
for (let i = 0i<this.threeli.lengthi++) {
this.threeli[i].style.border = 'none'
this.threeli[i].style.color = '#333'
}
this.threeli[i].style.border = '1px solid red'
this.threeli[i].style.color = 'white'
},false)
}
}
}
var msg = new Message(obox)
</script>
</body>
</html>
最近做一个小项目,前端需要有一个功能是点击某按钮时,弹出文件选择的框,然后获取目录并写入对应的输入框里,以往是选择某个文件进行上传,功能看起来有些像,但这次不同的是只能选择某个目录而不是文件,因为它并不是上传,它只是为了选择后台生成的文件保存的路径。 于是网上查解决方案,查到两种, 一种是仅在谷歌浏览器上有效的方式,在input节点里加一个属性 webkitdirectory,就可以实现点击弹出选择目录的功能,然后就可以截取目录,此种方式对非空文件夹是可以的实现的,只需监听此input的change事件即可,但如果选择的是空文件夹,就不会触发事件,就无法获取路径,所以这方法不复合我的需求。 另一种是只适用于IE浏览器的方式,即调用IE的activeX控件,为点击按钮绑定事件,然后就可以获取目录,然后到目录调到想要的地方即可,具体实现方式是: <input id="show"> <button onclick="clickBtn()">点击</button> function click() { try { var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939" //选择框提示 var Shell = new ActiveXObject("Shell.Application") var Folder = Shell.BrowseForFolder(0, Message, 64, 17) //起始目录为:我的电脑 //var Folder = Shell.BrowseForFolder(0, Message, 0) //起始目录为:桌面 if (Folder != null) { Folder = Folder.items() // 返回 FolderItems 对象 Folder = Folder.item() // 返回 Folderitem 对象 Folder = Folder.Path // 返回路径 if (Folder.charAt(Folder.length - 1) != "\\") { Folder = Folder + "\\" } document.getElementById('show').value = Folder return Folder } } catch (e) { alert(e.message)} } 但些方式也有一个问题是,此控件是默认关闭的,需要用户手动启用,并且要把本站点加入可信任站点才行,具体设置过程是: 1. 单击菜单工具->Internet选项->安全->受信任站点->站点->把此网站设为可信站点 2. 在自定义级别->对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用"