<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我正在尝试显示一个“编辑”按钮，然后在单击时子按钮会切换。
问题是在动画期间，两个部分都变为半高。这可能是与 Bootstrap css 的冲突，或者是我尝试过的 span/divs 的某种组合。想不通。
另外我认为幻灯片动画可能会使用 float ，这可能会产生一些影响。
希望可以通过更改 html(改变 div/spans 或其他，顺序？)而不是一些 css 覆盖来解决，如果可能的话？
[编辑]
点击隐藏按钮并显示其他按钮
[取消] [其他] [保存]
jsfiddle:http://jsfiddle.net/1s8e5kj5/2/
CSS:
<div class="col-xs-9">
<div style="display:inline-block">
<button class="btn btn-default" data-bind="click: TempRunFunction">run</button>
</div>
<span>
<span id="view-edit">
<button class="btn btn-primary" onclick="showEdit();">Edit</button>
</span>
<span id="view-edit-buttons" class="" style="display:none;">
<button class="btn btn-success">Save</button>
<button class="btn btn-warning">Arrange</button>
js
var speed = 1000;
function showEdit() {
$('#view-edit').hide('slide', { direction: 'left' }, speed);
$('#view-edit-buttons').show('slide', { direction: 'left' }, speed);
}
function hideEdit() {
$('#view-edit').show('slide', { direction: 'left' }, speed);
css:没有覆盖 bootstrap v3
理想情况下:
[Edit]
[Edi..[canc..
[Ed.[cancel] [ot..
[cancel] [other] [save]
非常感谢
最佳答案
在按钮容器中添加pull-left 类，并使用complete 函数。
var speed = 1000;
function showEdit() {
$('#view-edit').hide('slide', {direction: 'left'}, speed/4, function(){
$('#view-edit-buttons').show('slide', {direction: 'left'}, speed);
});
}
function hideEdit() {
$('#view-edit-buttons').hide('slide', { direction: 'left' }, speed, function(){
$('#view-edit').show('slide', {direction: 'left'}, speed/4);
});
}
关于同一行上的 jquery 显示/隐藏按钮显示不漂亮 - 在动画期间导致半高？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33873576/