我有一个如下所示的JavaScript文件:
function hideIt(body_id, icon_id) {
var x = document.getElementById(body_id);
var y = document.getElementById(icon_id);
if (x.style.height==="0px") {
x.style.height= x.scrollHeight + 'px';
x.addEventListener("webkitTransitionBegin", fullStyle(body_id));
y.src = "<%= asset_path('show_icon.png') %>";
} else {
x.style.height= '0px';
x.addEventListener("webkitTransitionEnd", noStyle(body_id));
y.src = "<%= asset_path('hide_icon.png') %>";
}
}
function noStyle(body_id) {
console.log("noStyle");
var x = document.getElementById(body_id);
x.style.padding = '0px';
x.style.margin = '0px';
x.style.border = 'none';
}
function fullStyle(body_id) {
console.log("fullStyle");
var x = document.getElementById(body_id);
x.style.padding = '10px';
x.style.marginBottom = '5px';
x.style.marginTop = '5px';
x.style.border = '1px solid #eaeaea';
}
我操作的元素的CSS看起来像这样:
.post-body-preview{
color: $black;
height: 0px;
overflow: hidden;
transition: height 1000ms;
}
现在的问题是,一旦我单击带有noStyle
的图标,就会触发icon_id
,该图标会触发hideIt
脚本以隐藏正文。元素x
会立即被删除其边距,内边距和边框,因此一旦按下按钮,webkitTransitionEnd
就被触发
有人可以指出我在做什么错吗?