Question

我想做的是有一个切换按钮，可以将一个div滑入和滑出视口左侧。因此，您访问该网站并且div和切换都可见，您单击切换，div和切换都向左滑动，但只有div滑出视口。切换需要保持不变，因此您显然可以将div切换回视图。

这是我的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中的所有内容都需要向左滑动。这是我尝试过的jQuery：

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

理论上这可行但我需要切换到不滑出视口。有什么建议吗？

Answer 1

如果我理解正确，我认为你可能正在寻找类似于滑出导航概念的东西。这是一个小小的演示，我摆弄你所描述的。如果你想重新使用它，它可以使用CSS。如果您正在寻找其他内容或者我误解了，请告诉我。：）

它会调整宽度，使其显示为屏幕外的div。控件是一个绑定到复选框的标签，然后选择其兄弟姐妹

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

Answer 2

我使用两个函数生成了一个纯JavaScript（即没有JQuery或其他需要的外部东西）版本的这个功能。

动画功能本身是：

function hMove(element, endPos, duration) {
    // element = DOM element to move
    // endPos = element.style.left value for the element in its final position
    // duration = time in ms for the animation

//    var leftPos = element.style.left.replace(/px/,"");  // Get the current position of the element
    var leftPos = window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,"");
    var animStep = (leftPos - endPos) / (duration / 10);  // Calculate the animation step size
    var direction = ( leftPos > endPos ) ? "left" : "right";  // Are we moving left or right?

    function doAnim() {  // Main animation function

        leftPos = leftPos - animStep;  // Decrement/increment the left position value

        element.style.left = leftPos + "px";  // Apply the new left position value to the element

        // Are we done yet?
        if ((direction == "left" && leftPos <= endPos) || (direction == "right" && leftPos >= endPos)) {
            clearInterval(animLoop);  // Stop the looping
            element.style.left = endPos + "px";  // Correct for any fractional differences
        }
    } // and of main animation function

    var animLoop = setInterval(doAnim, 10); // repeat the doAnim function every 10ms to animate
}

然后切换到：

function toggleLeftMenu() {

    var element = document.getElementById('myLeftMenu'); // The element I want to toggle

    // If the element is placed on screen (ie left > 0) hide it, otherwise show it
    if ( window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,"") > 0 ) {
        hMove(element, -310, 250);  // Call the horizontal move function
        document.getElementById('hideButton').innerHTML='\u00BB';  // Change the button to the show indicator
    } else {
        hMove(element, 30, 250);  // Call the horizontal move function
        document.getElementById('hideButton').innerHTML='\u00AB';  // Change the button to the hide indicator
    }
}

此http://jsfiddle.net/47MNX/16/显示了解决方案的实际效果。

-FM

用切换滑动div屏幕？

2 个答案: