老师,点击显示隐藏没有效果

来源:2-2 静静的显示和隐藏(1)

陈莺莺呀

2019-11-19 09:22:00

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>showhide</title>

<link rel="stylesheet" href="../css/base.css">

<style>

body{

width:400px;

margin:0 auto;

}

.btn{

width:50%;

height:30px;

float:left;

}

#box{

width:100%;

height:200px;

background-color:pink;

}

</style>

</head>

<body>

<button id="btn-show" class="btn">显示</button>

<button id="btn-hide" class="btn">隐藏</button>

<div id="box"></div>


<script src="../js/jquery-1.7.1.js"></script>

<script>

var silent={

show:function($elem,showCallback,shownCallback){

//$elem.html('<p>我要显示了</p>');

if(typeof showCallback==='function'){

showCallback();

}

if(typeof shownCallback==='function'){

shownCallback();

}

$elem.show();

// setTimeout(function(){

//  $elem.html($elem.html()+'<p>我已经显示了</p>');

// },1000);

},

hide:function($elem){

$elem.hide();

}

};

var css3={

fade:{

show:function(){


},

hide:function(){


}

},

slideUpDown:{

show:function(){


},

hide:function(){


}

},

slideLeftRight:{

show:function(){


},

hide:function(){


}

},

fadeSlideUpDown:{

show:function(){


},

hide:function(){


}

},

fadeSlideLeftRight:{

show:function(){


},

hide:function(){


}

}

};

var js={

fade:{

show:function(){


},

hide:function(){


}

},

slideUpDown:{

show:function(){


},

hide:function(){


}

},

slideLeftRight:{

show:function(){


},

hide:function(){


}

},

fadeSlideUpDown:{

show:function(){


},

hide:function(){


}

},

fadeSlideLeftRight:{

show:function(){


},

hide:function(){


}

}

};


var $box=$('#box');

$('#btn-show').on('click',function(){

slient.show($box,function(){

$box.html('<p>我要显示了</p>');

},function(){

setTimeout(function(){

$box.html($box.html()+'<p>我已经显示了</p>');

},1000);

});

});

$('#btn-hide').on('click',function(){

slient.hide($box);

});

</script>

</body>

</html>

http://img.mukewang.com/climg/5dd343b509dd3efb18990664.jpg

写回答

1回答

好帮手慕粉

2019-11-19

同学你好,当运行同学的代码时,没有发生报错信息,而且逻辑正确,这个时候我们就要考虑是不是单词拼错了,因为功能不能实现,所以就可能是显示和隐藏方面的问题,检查一下,果然单词拼错了,参考:

http://img.mukewang.com/climg/5dd35f4309308f4610430827.jpg

改正后就可以正常实现了。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 14456 问题

查看课程