Fatal编程技术网
  • javascript/
  • Javascript Rails 4.2、scss、html、引导。有条件地应用css以隐藏部分DOM。

Javascript Rails 4.2、scss、html、引导。有条件地应用css以隐藏部分DOM。

javascript ruby-on-rails twitter-bootstrap ruby-on-rails-4 sass

Javascript Rails 4.2、scss、html、引导。有条件地应用css以隐藏部分DOM。,javascript,ruby-on-rails,twitter-bootstrap,ruby-on-rails-4,sass,Javascript,Ruby On Rails,Twitter Bootstrap,Ruby On Rails 4,Sass,我有一个站点范围的侧栏，在左侧。它是引导nav的一部分。侧栏在sm屏幕及其下方折叠，但可通过按钮进行切换。这很好用 简而言之；我想在边栏也是空的时候折叠/隐藏它，而不影响上面描述的现有行为 我试图隐藏JQuery的hide（）和show（），但是这破坏了现有的功能 我还描述了下面的javascript片段，但没有成功 ../navigation\u partial.html.erb <head> <%# layout content omitted %> <

我有一个站点范围的侧栏，在左侧。它是引导
nav
的一部分。侧栏在
sm
屏幕及其下方折叠，但可通过按钮进行切换。这很好用

简而言之；我想在边栏也是空的时候折叠/隐藏它，而不影响上面描述的现有行为

我试图隐藏JQuery的
hide（）
和
show（）
，但是这破坏了现有的功能

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

../navigation\u 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>
上面的代码片段可以很好地切换
xs
屏幕上的侧栏（默认情况下是折叠的）

下面是我试图获得所需行为的尝试，使用javascript（和JQuery）折叠任何屏幕上的空侧栏

../sidebar.js

//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;
}

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
    };
  };

函数hideSidebarIfEmpty（）{

if（$（“#sidebar div.col-xs-12”）.children（）.length您的解决方案会发生什么情况？您是否希望它即使没有任何元素也仍然是“可切换”的？何时定义nav的元素（在渲染时或通过客户端的用户交互）？我尝试的解决方案是垃圾。我希望看到的行为是：-当侧栏中的内容时，小屏幕上的可切换始终显示在>小屏幕上（这是当前网站范围内的行为）-当侧栏中没有内容时，在所有屏幕上隐藏侧栏。我不是说它很好，我是问会发生什么。nav的元素何时定义，仅在渲染时？为什么jquery不隐藏（）为您工作？您的意思是什么，破坏现有功能？您想隐藏它，但希望它仍然是功能性的-这意味着什么？您可以首先阻止它渲染。您可以将其不透明度更改为0，使用负z索引发回，定义0宽度/高度，将其从dom中删除，应用隐藏的特定类是的，所以这有点取决于你想要什么，什么不起作用，以及你希望它如何起作用谢谢你的评论Micheal。在分析你的问题时，我已经确定了一个解决方案。不要一开始就渲染侧边栏。在以后的问题中，我将在我的文章中更加明确。