老师为什么会出现这个问题啊
//html
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/base.css">
<style type="text/css">
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
vertical-align: middle;
}
.dropdown-layer{
z-index: 1;
display: none;
position: absolute;
overflow: hidden;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
margin-left: 8px;
}
.menu .dropdown-layer{
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
height: 30px;
line-height: 30px;
color: #4d555d;
white-space: nowrap;
padding: 0 12px;
}
.menu-item:hover{
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1592041815973'); /* IE9 */
src: url('font/iconfont.eot?t=1592041815973#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff?t=1592041815973') format('woff'),
url('font/iconfont.ttf?t=1592041815973') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('font/iconfont.svg?t=1592041815973#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class*="-active"] .dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.transition{
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.fadeOut{
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
</style>
</head>
<body>
<div class= "menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<!-- <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li> -->
</ul>
</div>
<button id="btn-show">点我显示</button><button id="btn-hide">点我隐藏</button>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript">
$('.dropdown').on('dropdown-show',function(e){
$.getJSON('dropdown.json',function(data){
var $layer = $(this).find('.dropdown-layer'),
html = '';
for(var i=0;i<data.length;i++){
html += '<li><a href="'+ data[i].url +'" target="_blank" class="menu-item">'+ data[i].name +'</a></li>';
}
$layer.html(html);
});
});
$('.dropdown').dropdown({
css3:true,
js:true,
event:'hov',
delay:0
// animation:'fade'
// active:'menu'
});
$('#btn-show').on('click',function(){
$('.dropdown').dropdown('show');
});
$('#btn-hide').on('click',function(){
$('.dropdown').dropdown('hide');
});
</script>
</body>
</html>
//dropdown目录结构
//问题
正在回答
同学你好，老师这边修改端口地址之后也没有报错。建议查看下js文件夹下是否有这些文件，或者打开的是不是一个项目。代码中用的是相对路径，不是绝对路径，如果js文件夹下有这些文件，一般不会是路径的问题。
如果还是有问题建议恢复默认端口地址，也就是下载之后phpstudy软件中的WWW文件夹，例如：
D:\phpstudy\PHPTutorial\WWW
修改之后重启phpstudy，将自己的项目放在WWW文件下进行测试。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星