马上注册,免费下载更多dz插件网资源。
您需要 登录 才可以下载或查看,没有账号?立即注册
×
问题地址:http://www.quanqiuhao.cn/dl.html
这个导航页左侧目录点击展开后再点击不能合上,有没有大佬看看咋修改代码?- <!DOCTYPE html><html><head><meta charset="utf-8"><title>全球号导航页</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/page.css" /><link rel="stylesheet" ><link href="plugins/css/icons.min.css" rel="stylesheet" type="text/css" /></head><body><div class="page" id="app"> <div class="nav-left"> <div class="LogoName"> 全球号 </div> <div class="navDiv"> <div class="navName">主导航</div> <div class="nav-list"> <ul> <li class="nav-tab a_active waves-effect"> <a class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 首页 <span class="badge badge-pill badge-primary float-right">NEW</span> </a> </li> <!-- <li class="nav-tab"> <a href="#" class="li-a"><i class='bx bx-home-smile'></i> 设备管理</a> </li> --> <li class="nav-tab nav-ul"> <a href="javascript:void[0]" class="li-a"><i class='bx bx-layer'></i> 亚洲 <i class='bx bx-chevron-right' style="float: right;"></i></a> <div class="nav-box"> <a class="li-a-a" target="iframe">东亚</a> <a class="li-a-a" target="iframe">中国</a> <a class="li-a-a" target="iframe">蒙古</a> <a class="li-a-a" target="iframe">朝鲜</a> <a class="li-a-a" target="iframe">韩国</a> <a class="li-a-a" target="iframe">日本</a> <a class="li-a-a" target="iframe">东南亚</a> <a class="li-a-a" target="iframe">越南</a> <a class="li-a-a" target="iframe">柬埔寨</a> <a class="li-a-a" target="iframe">老挝</a> <a class="li-a-a" target="iframe">泰国</a> <a class="li-a-a" target="iframe">缅甸</a> <a class="li-a-a" target="iframe">菲律宾</a> <a class="li-a-a" target="iframe">文莱</a> <a class="li-a-a" target="iframe">马来西亚</a> <a class="li-a-a" target="iframe">新加坡</a> <a class="li-a-a" target="iframe">印度尼西亚</a> <a class="li-a-a" target="iframe">东帝汶</a> <a class="li-a-a" target="iframe">南亚</a> <a class="li-a-a" target="iframe">巴基斯坦</a> <a class="li-a-a" target="iframe">印度</a> <a class="li-a-a" target="iframe">尼泊尔</a> <a class="li-a-a" target="iframe">不丹</a> <a class="li-a-a" target="iframe">孟加拉国</a> <a class="li-a-a" target="iframe">马尔代夫</a> <a class="li-a-a" target="iframe">斯里兰卡</a> <a class="li-a-a" target="iframe">中亚</a> <a class="li-a-a" target="iframe">哈萨克斯坦</a> <a class="li-a-a" target="iframe">乌兹别克斯坦</a> <a class="li-a-a" target="iframe">吉尔吉斯斯坦</a> <a class="li-a-a" target="iframe">土库曼斯坦</a> <a class="li-a-a" target="iframe">诺记克斯坦</a> <a class="li-a-a" target="iframe">西亚</a> <a class="li-a-a" target="iframe">土耳其</a> <a class="li-a-a" target="iframe">格鲁吉亚</a> <a class="li-a-a" target="iframe">亚美尼亚</a> <a class="li-a-a" target="iframe">阿塞拜疆</a> <a class="li-a-a" target="iframe">伊朗</a> <a class="li-a-a" target="iframe">阿富汗</a> <a class="li-a-a" target="iframe">叙利亚</a> <a class="li-a-a" target="iframe">伊拉克</a> <a class="li-a-a" target="iframe">沙特阿拉伯</a> <a class="li-a-a" target="iframe">黎巴嫩</a> <a class="li-a-a" target="iframe">以色列</a> <a class="li-a-a" target="iframe">巴勒斯坦</a> <a class="li-a-a" target="iframe">约旦</a> <a class="li-a-a" target="iframe">科威特</a> <a class="li-a-a" target="iframe">巴林</a> <a class="li-a-a" target="iframe">卡塔尔</a> <a class="li-a-a" target="iframe">阿拉伯联合国</a> <a class="li-a-a" target="iframe">也门</a> <a class="li-a-a" target="iframe">阿曼</a> </div> </li> <li class="nav-tab nav-ul"> <a href="javascript:void[0]" class="li-a"><i class='bx bx-cog'></i> 欧洲 <i class='bx bx-chevron-right' style="float: right;"></i></a> <div class="nav-box"> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> </div> </li> <li class="nav-tab nav-ul"> <a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 非洲 <i class='bx bx-chevron-right' style="float: right;"></i></a> <div class="nav-box"> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> </div> </li> <li class="nav-tab nav-ul"> <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 大洋洲 <i class='bx bx-chevron-right' style="float: right;"></i></a> <div class="nav-box"> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> </div> </li> <li class="nav-tab nav-ul"> <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 测试 <i class='bx bx-chevron-right' style="float: right;"></i></a> <div class="nav-box"> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> </div> </li> <li class="nav-tab nav-ul"> <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 大洋洲 <i class='bx bx-chevron-right' style="float: right;"></i></a> <div class="nav-box"> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> <a href="html/device/device.html" class="li-a-a" target="iframe">测试</a> </div> </li> </ul> </div> </div> </div> <div class="nav-right"> <div class="nav-top"> 世界,触手可得。 </div> <div class="content-page"> <iframe name="iframe" width="100%" height="100%" frameborder="0" src="http://www.quanqiuhao.cn/index.html"></iframe> </div> </div></div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript"> $(function() { let navflag = false; $('.nav-tab').click(function() { $(this).siblings().each(function() { $(this).removeClass('a_active'); // $(this).removeClass('a_active'); $(this).find('.nav-box').css('height', '0') //关闭右侧箭头 if ($(this).attr('class').indexOf('nav-ul') != -1) { $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)') $(this).find('.bx-chevron-right').css('transition', 'all .5s') $(this).removeClass('nav-show') // $(this).find('div').removeClass('nav-box') } }) //当前选中 $(this).addClass('a_active') $(this).find('.li-a').addClass('active') // 打开右侧箭头 $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)') $(this).find('.bx-chevron-right').css('transition', 'all .5s') $(this).addClass('nav-show') // $(this).find('div').addClass('nav-box') }) /* 二级菜单a点击事件 */ $(".li-a-a").click(function() { $(".li-a-a").each(function() { $(this).removeClass('active-li-a'); }) $(this).addClass('active-li-a'); }) }) // const vue = new Vue({ // el:'#app', // data:{ // }, // methods:{ // liCli(){ // } // } // })</script></div></body></html>
复制代码
©DZ插件网所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 网站部分内容来源于网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,得到更好的正版服务。 您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。 如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解!
|
|