为什么点击按钮后无法显示？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单组件</title>
<link rel="stylesheet" href="css/base.css" />
<style type="text/css">
body {
background-color: gray;
}
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
.dropdown-arrow {
display: inline-block;
/*background-repeat: no-repeat;*/
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
overflow: hidden;
}
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
right: 0;
left: auto;
}
/*.menu .dropdown*/
.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 {
/*width: 8px;
height: 6px;
background-image: url(../img/dropdown-arrow.png);*/
margin-left: 8px;
}
.menu .dropdown-layer {
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item {
display: block;
height: 30px;
line-height: 30px;
padding: 0 20px;
color: #4d555d;
white-space: nowrap;
}
.menu-item:hover {
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle {
background-color: #fff;
border-color: #cdd0d4;
}
.menu-active .dropdown-arrow {
/*background-image: url(../img/dropdown-arrow-active.png);*/
}
/*.menu-active .dropdown-layer {
display: block;
}*/
/* css 绘制箭头
.icon-triangle-down{
width:0px;
height:0px;
border:4px solid #535b62;
border-right-color:transparent;
_border-right-color:yellow;
border-left-color: transparent;
_border-left-color:yellow;
border-bottom: none;
}
.menu-active .icon-triangle-down{
border-top: none;
border-bottom:4px solid #f11c1c;
}*/
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/*单独菜单旋转*/
/* .menu-active .dropdown-arrow {
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}*/
/*多菜单旋转*/
[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;
}
.dropdown-loading{
width:32px;
height: 32px;
background: url(../img/loading.gif) no-repeat;
margin: 20px;
}
</style>
</head>
<body>
<!-- 通用html代码
<div class="menu dropdown">
<div class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a>
<div class="dropdown-layer dropdown-left">
</div>
</div> -->
<!-- <div class="menu dropdown fl" data-active="menu">
<a class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></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> -->
<div class="menu dropdown fl" data-active="menu" data-load="dropdown.json">
<a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!-- 解决按需加载。使用json文件-->
<!-- <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li> -->
</ul>
</div>
<!-- <div class="menu dropdown fl" data-active="menu"> -->
<!-- <a href="javascript:;" class="dropdown-toggle">我的慕淘2<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> -->
<!-- <div class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘2<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝2</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹2</a></li>
</ul>
</div>
<div class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘3<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝3</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹3</a></li>
</ul>
</div> -->
<button id='btn-show'>点我显示</button>
<button id='btn-hide'>点我隐藏</button>
<script src="js/jquery.js"></script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script type="text/javascript">
// -----简单写法-----
// $('.dropdown').hover(function() {
// var $this=$(this); // 缓存this，以避免重复加载
// $this.addClass($this.data('active')+'-active');
// }, function() {
// var $this=$(this);
// $this.removeClass($this.data('active')+'-active');
// });
//------封装代码方式--------
// function dropdown(elem) {
// var $elem = $(elem),
// activeClass = $elem.data('active') + '-active';
// $elem.hover(function() {
// $elem.addClass(activeClass);
// }, function() {
// $elem.removeClass(activeClass);
// });
// }
//单个下拉菜单 dropdown($('.dropdown')[0])
//多个下拉菜单
// $('.dropdown').each(function(){
// dropdown($(this));
// });
// ------插件方式-------
// function dropdown(elem) {
// var $elem = $(elem),
// activeClass = $elem.data('active') + '-active';
// $elem.hover(function() {
// $elem.addClass(activeClass);
// }, function() {
// $elem.removeClass(activeClass);
// });
// }
// $.fn.extend({
// dropdown:function(){
// return this.each(function(){
// dropdown(this);
// });
// }
// });
// $('.dropdown').dropdown(); // 插件为了更好的调用
// $('.dropdown').on('dropdown-show dropdown-shown dropdown-hide dropdown-hidden',function (e) {
// console.log(e.type);
// })
// $('.dropdown').on('dropdown-show', function(e) {
// var $this=$(this),
// dataLoad=$(this).data('load');
// if(!dataLoad) return;
// // $layer.html('<li class="dropdown-loading"></li>');
// if(!$this.data('loaded')){
// var $layer = $(this).find('.dropdown-layer'),
// html = '';
// $.getJSON(dataLoad, function(data) {
// console.log(1);
// setTimeout(function() {
// 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);
// $this.data('loaded',true);
// }, 1000);
// });
// }
// });
$('.dropdown').on('dropdown-show', function (e) {
var $layer=$(this).find('.dropdown-layer'),
html='';
$.getJSON('dropdown.json',function(data){
// console.log(data);
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({
event: 'hover',
delay: 1000,
css3: true,
js: true,
animation: 'fade'
// active:'menu'
});
$('#btn-show').on('click', function() {
$('.dropdown').dropdown('show');
});
$('#btn-hide').on('click', function() {
$('.dropdown').dropdown('hide');
});
</script>
</body>
</html>
[
{
"url":"###",
"name":"已买到的宝贝"
},
{
"url":"###",
"name":"我的足迹"
},
{
"url":"###",
"name":"我的优惠券"
}
]1
收起
正在回答
2回答
同学你好， 老师在源码中将你的这部分代码粘贴过去， 测试你这段代码， 是可以正常显示的内容的哦，示例：
同学说的不能显示具体是指什么不能显示呢， 可以详细的描述一下做了什么操作哦，或者打开控制台查看是否有报错信息， 如果有问题， 可以截图过来， 再次提问， 我们会继续为你解答的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
qq_鸭绿桥第一帅哥_0
2019-06-18 13:14:39
感谢老师，目前已经可以正常显示了。但是控制台为什么会报错呢？
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星