我正在尝试隐藏使用slide功能以内联方式显示的提醒。它以内联方式显示,但滑动并不像我想要的那样内联。如何使滑动发生在内?
以下是包含当前代码
的代码段
$("#testDiv2").show();
$("#testDiv2").on('click', function () {
$("#testDiv2").hide('slide',{direction: 'left'}, 6000);
});
$(function() {
if ($("#testDiv2").is(':visible'))
$("#testDiv2").css('display','inline-block');
});
#test,#testDiv,#testDiv2 {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="test">
A
<div id="testDiv2">
<div id="testDiv" class="alert alert-success">Click to close</div>
</div>
B
</div>
相关帖子:
答案 0 :(得分:1)
好吧,我发现这段代码会为你解决内联问题,但仍然存在一些布局问题。我正在研究它。
#test > div.ui-effects-wrapper {
display: inline-block !important;
}
<强>段强>
$("#testDiv2").show();
$("#testDiv2").on('click', function() {
$("#testDiv2").hide('slide', {
direction: 'left'
}, 6000);
});
$(function() {
if ($("#testDiv2").is(':visible'))
$("#testDiv2").css('display', 'inline-block');
});
&#13;
#test,
#testDiv,
#testDiv2 {
display: inline-block;
}
#test > div.ui-effects-wrapper {
display: inline-block !important;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="test">
A
<div id="testDiv2">
<div id="testDiv" class="alert alert-success">Click to close</div>
</div>
B
</div>
&#13;