jquery - 在 MVC 布局中折叠边栏

Question

我正在尝试在我的 MVC 布局中展开和折叠边栏。我使用此处示例的细微变化:enter link description here

问题是，一旦侧边栏折叠，我的“ View ”的内容就不会展开。是否可以这样做？如果可以，有人知道这种事情在 MVC 中起作用的代码示例吗？

我已尝试实现 Artanis 的建议，但仍然无效。这是我的 _Layout.cshtml 页面中的代码:

  <div class="one-row-location">
    @RenderBody()
    <div class="sidebar-nav">
        <div class="container-fluid">
            <div class="row row-offcanvas row-offcanvas-left">

                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                    <div class="list-group">
                        <a href="#" class="list-group-item active">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                    </div>


                </div>
                <div class="col-xs-12 col-sm-9 content">
                    <p class="pull-left">
                        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                    </p>

                </div><!--/span-->

            </div><!--/row-->

        </div><!-- /.container -->
    </div>

这是我的 Index.cshtml 页面中的内容(查看页面内容是否扩展只是垃圾):

<div class="location-field">
This is a test.<input id="Text1" type="text" />
<br />
this is another test!
<br />
And another
<br />

这是我的 CSS 文件中的内容:

    .one-row-location {
  width: 100%; 
    display: table;
}
.location-field{
    display: table-cell;
    vertical-align: top;
}
.sidebar-nav {
    position: absolute;
    top: 100px;
    width: 2000px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-cell;

我觉得好像我很接近，但我显然缺少或不理解某些东西。感谢您的帮助!

Answer 1

我建议对容器 DIV 使用 display: table，对两个子 DIV 使用 display: table-cell(一个用于侧边栏，另一个用于内容)。侧边栏 DIV 可以有固定的宽度(可以通过使用 jQuery 在 200px(侧边栏打开)和 0px(侧边栏折叠)之间切换来设置动画)，但是内容 DIV 应该没有宽度设置，这意味着它会扩展到剩余的可用空间因为 display: table-cell。

这是我昨天为了说明不同问题的效果而制作的 fiddle 。在此示例中，输入字段的图标定义了宽度，但无论容器尺寸如何，输入字段都会扩展。在您的情况下，唯一的区别是容器 DIV 将是屏幕宽度的 100%。

http://jsfiddle.net/p0s8yad7/3/

HTML

    <div class="one-row-location">
    <div class="location-icon"><img src="http://oi62.tinypic.com/10ng7b5.jpg"></div>
          <div class="location-field"><input  class="input-label inputlocation" type="text" name="geolocation" id="geolocation" placeholder="Lokation" value="" />
        </div>

</div>

和 CSS

.one-row-location {
  width: 80%;  // For demonstartion purposes - this width can be whatever is needed
  display: table;
}
.location-field{
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
.inputlocation{
    font-size:14px;
    color:#99999f;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
    font-style: italic;
    height:27px;
    width:100%;
    margin-left: 0px;
}
.location-icon {
    display: table-cell;
    width: 29px;
    height:33px;
}