Question

我有一个_Layout页面，其中包含标准元素。

  <body id="layoutBody">
   <div class="wrapper">
    @Html.Partial("_TopMenu")
    @Html.Partial("_LeftMenu")
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- Main content -->
        <section class="content">
            @RenderBody()
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0
        </div>
    </footer>
   </div><!-- ./wrapper -->

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap"
  </body>

在这个布局中，我有一个＆＃34; Home＆＃34;，＆＃34; Index＆＃34; @RenderBody内的页面，包含以下div：

<div class="small-box bg-yellow">
   <div class="inner">
      <h4>Phone Directory</h4>
      <h5>New</h5>
   </div>
   <div class="icon">
      <i class="mi mi-contact-phone"></i>
   </div>
   <a id="newUserCollapse" role="button" class="list-group-item" data-toggle="collapse" data-target="#new">
      <span class="glyphicon glyphicon-chevron-right"></span>
      Add New User
      <span class="fa fa-user-plus pull-right"></span>
   </a>
   <div id="new" class="sublinks collapse">
      <iframe src="~/PhoneMasters/Create" id="addUserIframe" align="middle" frameborder="0" style="width: 100%; height :100%; min-height: 600px; padding-top: 0px"></iframe>
   </div>
</div>

我要做的是在_Layout开启newUserCollapse时禁用show.bs.collapse视图中的滚动条。有什么办法可以实现吗？

提前致谢！

Answer 1

要在JQuery中访问PartialView元素，您需要使用文档：

$(document).find("#YourScrollId").prop('disabled', true);

Answer 2

在页面的某处添加以下Javascript代码：

    <script>
       $(document).ready(function(){
          /* Event to disable scrolling when #newUserCollapse is visible */
          $('#newUserCollapse').on('show.bs.collapse', function () {
             $('html, body').css({ overflow: 'hidden', height: '100%' });
          });

          /* Event to restore scrolling when #newUserCollapse is hidden */
          $('#newUserCollapse').on('hidden.bs.collapse', function () {
             $('html, body').css({ overflow: 'auto', height: 'auto' });
          });
       });
    </script>

如何从部分视图中获取_Layout页面中的元素

2 个答案: