2

我想要做的是有一个切换，将 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");
        });

这在理论上可行，但我需要切换开关不会滑出视口。有什么建议么？

4

2 回答 2

1

我使用两个函数制作了这个功能的纯 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/显示了实际的解决方案。

-调频

于 2014-03-28T13:03:46.490 回答
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

于 2013-09-24T22:27:35.217 回答