jquery - Jquery .slideDown() 仅从顶部
问题描述
单击父元素时,我试图向下滑动 div。我能够获得滑动行为,但是,它不仅从顶部滑动,还从左侧扩展,因此从左上角扩展。我只希望它从顶部滑落。
我尝试过使用 slideDown()、slideToggle(),甚至使用 animate() 设置高度动画,但行为始终相同,从左上角滑动。我怀疑这与引导程序有关,但这只是一个猜测。
这是我的jQuery:
$('div.card').click(function() {
$(this).find("div.details-container").toggle(function() {
$(this).find("div.details-container").slideToggle(2000);
});
});
tcard-head {
border-top: 2px solid #f2f2f2;
padding: 15px 15px 5px 15px;
background-color: white;
font-weight: 600;
color: black;
z-index: 2;
}
.pio-details {
margin-top: -2px;
overflow: hidden;
}
.details-container {
overflow: hidden;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="tcard-head">
<div class="row">
<div class="col-xs-7 text-left">
<div class="avatar"></div>
<%= user.full_name %>
</div>
<div class="col-xs-2">
<%= user.qualification %>
</div>
<div class="col-xs-3 text-right">
<%= user.display_status %>
</div>
</div>
</div>
<div class="row details-container">
<div class="col-xs-10 col-xs-offset-1 white-bg pio-details">
<div class="tcard col-xs-12 col-sm-6">Agency: <span><%= user.agency %></span>
</div>
</div>
</div>
</div>
我正在尝试滑动.pio-details
div。我将它包装在 .details-container 中,认为这可能会有所帮助。我没有。
我正在使用 Rails 5 和 Bootstrap-SASS 3.3.7。知道为什么我可能会出现这种行为吗?谢谢。
解决方案
推荐阅读
- c# - 在使用条件测试后仍会评估空值
- python-3.x - 根据烧瓶中的其他选择选项显示选择字段
- amazon-web-services - 使用dynamoDB流触发理解同步调用的Lambda函数
- python - Python - “追加(列表)”和“追加(列表[:])”有什么不同?
- azure-ad-b2c - 自定义策略中的 Azure B2C MFA 电话因素验证重试处理
- c# - 没有 BeginLifeTimeScope 的 Autofac InstancePerLifeTimeScope
- python - 在 Python 中打印大型 JSON 文件的前几行
- java - 设定火花内的组合
- java - 无法增加 java 堆大小
- flutter - dart 的颤振 redux 中的 TypedReducer 中的泛型