我正在使用 Bootstrap 来管理我的 UI。我有三个 Div - 第一个 div:col-lg-10。 第二个分区:col-lg-36。 第三个分区:col-lg-1。第三个 div 有另一个隐藏的 div (Inner_Third div)，其中包含我要显示的数据。
第一和第二 Div 总是可见的。 Third Div 是可折叠的，它会根据来自 Second div 的超链接点击展开(和 show() Inner_Third div)。
我能够轻松扩展第三个 div(并显示() Inner_Third div)。但是当我再次折叠第三个 div(和 hide() Inner_Third div)时，我被卡住了。 Inner_Third div 的 hide() 发生在折叠开始之前，我希望它在折叠之后 hide()。
折叠状态: 第一个 div:col-lg-10。 第二个分区:col-lg-36。 第三个 div:col-lg-1(隐藏了 Inner_Third div)。
展开状态: 第一个 div:col-lg-10。 第二个分区:col-lg-19。 第三个 div:col-lg-19(可见 Inner_Third div)。
下面是我的一页代码-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-lg-10" style="height:300px;background-color: #FA5D4E" id="content">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-lg-36" style="background-color:yellow;height:300px" id="menu1">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
<a href="#" id="showDetailsSection">Details</a>
</div>
<div class="col-lg-1" style="background-color:blue;height:300px;padding:0px" id="menu2">
<div id="menu2Div" style="display:none;background-color:green;overflow:auto;margin:0px;height:300px;padding:0px">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$('#showDetailsSection').click(function () {
var $col1 = $('#menu1');
var $col2 = $('#menu2');
if ($col1.hasClass('col-lg-36')) {
$col1.switchClass('col-lg-36', 'col-lg-19');
$col2.switchClass('col-lg-1', 'col-lg-19');
$('#menu2Div').show(0);
}
else {
$col1.switchClass('col-lg-19', 'col-lg-36');
$col2.switchClass('col-lg-19', 'col-lg-1');
$('#menu2Div').hide();
}
});
</script>
最佳答案
Bootstrap has an event在崩溃完成后触发。您可以使用 hidden.bs.collapse 而不是通过 click 进行隐藏:
$('#showDetailsSection').on('hidden.bs.collapse', function () {
$('#menu2Div').hide();
});
关于jquery - Bootstrap DIV 在 JQuery 中滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25355650/