Question

我左边有一个站点宽边栏。它是Bootstrap nav的一部分。侧栏在sm屏幕和下方折叠，但可通过按钮切换。这很好。

简单地说;当它也是空的时候我想折叠/隐藏侧边栏，而不会影响上面描述的现有行为。

我试图隐藏JQuery的hide()和show()，但这会破坏现有的功能。

我还在下面描述了javascript片段，但没有成功。

... / navigation_partial.html.erb

<head>
  <%# layout content omitted  %>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div>
        <%= link_to something %>
      </div>
    </div>
    <%# collapsed for mobile  %>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <%# bunch of links%>
        <li>
        </li>
      </ul>
    </div>
  </div>
</head>

<%# Side bar component  %>
<div class="row-offcanvas row-offcanvas-left">
  <div id="sidebar" class="sidebar-offcanvas">
    <div class="col-xs-12">
      <%= yield :sidebar  %>
    </div>
  </div>
  <div class="row" id="main">
    <div class="col-xs-12">
      <%# button to toggle sidebar %>
      <p class="visible-xs">
        <button type="button" id="sidebar-toggle-button" class="btn btn-primary btn-xs" data-toggle="sidebar">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
      </p>
      <body class="<%= controller_name %> <%= action_name %>">
        <%# Page content  %>
        <div id="primary-content">
          <%= yield  %>
        </div>
      </body>
    </div>
  </div>
</div>

... / sidebar.scss

//Sidebar which collapses on small devices, being toggable by button
#sidebar {
  width           : inherit;
  min-width       : 160px;
  max-width       : 160px;
  background-color:#f5f5f5;
  float           : left;
  height          :100%;
  position        :relative;
  overflow-y      :auto;
  overflow-x      :hidden;
}

body,html,.row-offcanvas {
  height: 100%;
}

//Trigger collapse on small devices
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position          : relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition   : all 0.25s ease-out;
    transition        : all 0.25s ease-out;
    width             :calc(100% + 160px);
  }
  .row-offcanvas-left {
    left: -160px;
  }
  .row-offcanvas-left.active {
    left: 0;
  }
  .sidebar-offcanvas {
    position: absolute;
    top     : 0;
  }
}

//Primary page content sits within this div
#main {
  height  :100%;
  overflow:auto;
}

上面的代码段可以正常切换xs屏幕上的侧边栏（默认情况下已折叠）。

以下是我尝试获取所需行为的方法，使用javascript（和JQuery）将任何屏幕上的侧边栏折叠为空。

... / sidebar.js

function hideSidebarIfEmpty() {
    if ($("#sidebar div.col-xs-12").children().length <= 0) {
      $(".row-offcanvas").css("position","relative");
      $(".row-offcanvas").css("-webkit-transition","all 0.25s ease-out");
      $(".row-offcanvas").css("-moz-transition","all 0.25s ease-out");
      $(".row-offcanvas").css("transistion","all 0.25s ease-out");
      $(".row-offcanvas").css("width","calc(100% + 160px)");
      $(".row-offcanvas-left").css("left","-160px");
      $(".row-offcanvas-left.active").css("left","0");
      $(".sidebar-offcanvas").css("position","absolute");
      $(".sidebar-offcanvas").css("top","0");
    } else {
      // lots of '.css("property","");' calls
    };
  };

Rails 4.2，scss，html，Bootstrap。有条件地应用css来隐藏DOM的一部分。

0 个答案: