为什么宽度这么宽？那里出了问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示和隐藏模块</title>
<link rel="stylesheet" href="./css/base.css">
</head>
<style>
body {
width: 400px;
margin: 0 auto;
}
.btn {
width: 50%;
height: 30px;
}
#box {
display: none;
width: 100%;
height: 200px;
/* padding: 100px 0; */
background-color: red;
overflow: hidden;
}
.transition{
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>
<body>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class="">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="./js/showHide.js"></script>
<script>
function init($elem, hiddenCallback) {
if ($elem.is(':hidden')) {
$elem.data('status', 'hidden');
if(typeof hiddenCallback == 'function') {
hiddenCallback();
}
} else { //shown
$elem.data('status', 'shown');
}
}
function show($elem,callback) {
if($elem.data('status') == 'show'){
return;
}
if($elem.data('status') == 'shown'){
return;
}
$elem.data('status','show').trigger('show');
callback();
}
function hide($elem,callback) {
if($elem.data('status') == 'hide'){
return;
}
if($elem.data('status') == 'hidden'){
return;
}
$elem.data('status','hide').trigger('hide');
callback();
}
var silent = {
init: init,
show: function ($elem) {
//发布订阅方式
show($elem,function() {
$elem.show();
$elem.data('status','shown').trigger('shown');
})
},
hide: function ($elem) {
hide($elem,function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
}
};
var css3 = {
fade: {
init: function ($elem) {
css3._init($elem, 'fadeOut');
},
show: function ($elem) {
css3._show($elem, 'fadeOut');
},
hide: function ($elem) {
css3._hide($elem,'fadeOut');
}
},
slideUpDown: {
init: function ($elem) {
$elem.height($elem.height());
css3._init($elem, 'slideUpDownCollapse');
},
show: function ($elem) {
css3._show($elem, 'slideUpDownCollapse');
},
hide: function ($elem) {
css3._hide($elem,'slideUpDownCollapse');
}
},
slideLeftRight: {
init: function ($elem) {
$elem.width($elem.width());
css3._init($elem, 'slideLeftRightCollapse');
},
show: function ($elem) {
css3._show($elem, 'slideLeftRightCollapse');
},
hide: function ($elem) {
css3._hide($elem,'slideLeftRightCollapse');
}
},
fadeSlideUpDown: {
show: function () {
},
hide: function () {
}
},
fadeSlideLeftDown: {
show: function () {
},
hide: function () {
}
}
};
css3._init = function($elem, className) {
$elem.addClass('transition');
init($elem,function () {
$elem.addClass(className);
});
};
css3._show = function($elem, className) {
show($elem,function(){
$elem.off('transitionend').one('transitionend', function () {
$elem.data('status','shown').trigger('shown');
});
$elem.show();
setTimeout(() => {
$elem.removeClass(className);
}, 20);
})
}
css3._hide = function($elem, className) {
hide($elem,function() {
$elem.off('transitionend').one('transitionend', function () {
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
});
$elem.addClass(className);
});
}
var js = {
fade: {
show: function () {
},
hide: function () {
}
},
slideUpDown: {
show: function () {
},
hide: function () {
}
},
slideLeftRight: {
show: function () {
},
hide: function () {
}
},
fadeSlideUpDown: {
show: function () {
},
hide: function () {
}
},
fadeSlideLeftDown: {
show: function () {
},
hide: function () {
}
}
};
var $box = $('#box');
// silent.init($box);
css3.slideLeftRight.init($box);
$('#btn-show').on('click', function () {
css3.slideLeftRight.show($box);
});
$('#btn-hide').on('click', function () {
css3.slideLeftRight.hide($box);
})
//a事件
$box.on('show shown hide hidden', function (e) {
console.log(e.type);
})
</script>
</html>2
收起
正在回答 回答被采纳积分+1
3回答
相似问题
登录后可查看更多问答，登录/注册
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星