javascript - 使用切换按钮将 div 滑出屏幕？

Question

我想做的是有一个切换器，可以将 div 滑入和滑出左侧的视口(viewport)。因此，您访问该网站并且 div 和切换按钮都可见，您单击切换按钮，div 和切换按钮都会向左滑动，但只有 div 滑出视口(viewport)。切换需要保持不变，这样您就可以明显地将 div 切换回 View 中。

这是我的 HTML:

<div id="right-hand-column">

    <div id="hide-column">
    </div>

    <div id="slide-container">
      <div id="list-header">
        <h3>My Journals</h3>
        <a href="#" class="plus-icon md-trigger" id="create-journal" data-modal="modal-5"><i class="icon-plus"></i></a>
      </div>

      <div id="submission-list-container">
      <% if can? :read, Folder %>
        <% current_user.folders.each do |folder| %>
          <% if folder.parent_id.nil? %>
              <%= content_tag :div, :data => {:id => folder.id }, class: 'post-container' do %>
                <div id="journal-title"><%= folder.title %></div>
              <% end %>
          <% else %>
          <% end %>
      <% end %>
      <% end %>

        <hr id="above-container-footer">
        <h2 id="journal-container-bottom">Select a journal or<br/> <a href="#">create a new one.</a></h2>

      </div>

      <div id="fixed-bottom-container">
        <h3>chakra</h3>
        <ul id="footer-links">
          <li><a>About ·</a></li>
          <li><a>Terms ·</a></li>
          <li><a>Contact</a></li>
        </ul>
      </div>

    </div>

        </div>  

顶部的 div #hide-column 是切换开关。 #slide-container 中的所有内容都需要从左侧滑出 View 。这是我尝试过的 jQuery:

$("#hide-column").click(function(){
            $("#slide-container").toggle("slide", function(){
                $(".resize").css({
                    'max-width':'100%'
                });
            });
    $(this).toggle("slide");
        });

这在理论上是可行的，但我需要切换以不滑出视口(viewport)。有什么建议吗？

Answer 1

如果我理解正确的话，我想您可能正在寻找类似于滑出导航概念的东西。这是我对你所描述的内容进行修改的一个小演示。如果你想改变它的用途，它可以使用 css 来工作。如果您正在寻找其他内容或者我误解了，请告诉我。 :)

它调整宽度，使其看起来像一个 div 进入屏幕外。该控件是一个与复选框绑定(bind)的标签，然后选择其同级

input[type='checkbox']:checked ~ div.toggle-area {
width:30%;
}

input[type='checkbox']:checked + div.page-wrap {
    width:70%;
    float:right;
}

演示 http://jsfiddle.net/bDW6J/1/

最初的概念 http://codepen.io/jetpacmonkey/pen/ktIJz