Question

我正在使用Bootstrap来管理我的UI。我有三个分区 - 第一个div：col-lg-10。第二个div：col-lg-36。第三个div：col-lg-1。第三个div有另一个隐藏的div（Inner_Third div），它有我要显示的数据。

第一和第二分区始终可见。第三个Div是可折叠的，它会根据Second div中的超链接进行扩展（和show（）Inner_Third div。

我可以轻松地扩展第三个div（并显示（）（内部显示那个Inner_Third div）。但是当我再次折叠第三个div（并隐藏（）Inner_Third div）时，我陷入了困境。 Inner_Third div的hide（）在崩溃开始之前发生，我希望它在崩溃后隐藏（）。

倒塌的状态：第一个div：col-lg-10。第二个div：col-lg-36。第三个div：col-lg-1（隐藏了Inner_Third div）。

扩大国家：第一个div：col-lg-10。第二个div：col-lg-19。第三个div：col-lg-19（可见Inner_Third div）。

以下是我的One Page代码 -

<!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 &raquo;</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 &raquo;</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 &raquo;</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>

Answer 1

崩溃完成后发生的

Bootstrap has an event。您可以使用click：

而不是隐私hidden.bs.collapse

$('#showDetailsSection').on('hidden.bs.collapse', function () {
     $('#menu2Div').hide();
});

Bootstrap DIV在JQuery中滑动

1 个答案: