logo标签列表

让切换按钮将内容向上推而不是向下

javascriptjqueryhtml
4

当前开关将向下打开内容，但有些内容被视口截断。我该如何使切换的内容始终适合视口，并将其上方的内容向上推动？

$(document).ready(function() {
  $(".content").hide();    
  $(".toggle").on("click", function(e) {   
    $(this).next('.content').slideToggle(200);
  });
});

问题的图片：

在这里输入图片描述

编辑

我尝试添加了Aleks G建议的代码：

$(document).ready(function(){
  $(".content").hide();
  $(".toggle").on("click", function(e){   
    $(this).next('.content').slideToggle(200, function() {
      if($(this).position().top + $(this).height() > $(this).parent().innerHeight()) {
        $(this).parent().scrollTop($(this).position().top - 100);
      }  
    });
  }); 
});

编辑 2

新的 JSFiddle: http://jsfiddle.net/Dar_T/2h2wjp2L/

我正在看那个。然而，我仍然希望切换内容向下移动而不是向上。我只想让它移动以适应视口。 - user2252219
小提琴不起作用。 - Pablo Matias Gomez
@PabloMatíasGomez 我更新了原帖，并提供了演示代码。 :) - user2252219
如果视角不够高，画面和文字会发生什么？文字会覆盖在画面之上吗？ - Lloyd Banks
@LloydBanks 不，它只是像平常一样运行，没有任何改变。 - user2252219
显示剩余2条评论
7个回答
2
你需要做的是在你的slideToggle调用中添加一个“complete”参数。在其中，只需检查打开内容的高度，如果超出了视口的内部高度，则将视口滚动到内容的顶部。

这里是jsFiddle演示这个想法。

在那个例子中，我的视口是一个固定的最大高度div。我切换了一大块文本。在完成函数中，我检查文本的高度，如果必要，滚动父div。

这是相关的javascript：

$(document).ready(function(){
    $('#toggler').on("click", function() {
        $('#content').slideToggle("slow", function() {
            if($(this).position().top + $(this).height() > $(this).parent().innerHeight()) {
                $(this).parent().scrollTop($(this).position().top - 10);
            }  
        });
    });
});

请注意滚动位置中的额外-10 - 不知何故，在测试时它总是滚动超出div的起始位置10个像素，因此这是一个肮脏的hack，以滚动到正确的位置。

编辑：我稍微更新了javascript代码，使其将新打开的div定位在视口底部100像素处，而不是将其带到视口顶部。您可以使用-100部分来修改定位。由于某种原因，我无法让jsfiddle保存我创建的内容并给我唯一的url - 那里有些东西没有正常工作，因此这是我的完整代码。

HTML：

<div class="viewport">
    <button id="toggler">More info</button>
    <img src="http://www.random.org/analysis/randbitmap-rdo-section.png" />
    <div id="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
</div>

CSS：

.viewport {
    max-height: 300px;
    border: solid 1px darkGrey;
    padding: 10px;
    overflow: auto;
}
div#content {
    display: none;
}

Javascript：

$(document).ready(function () {
    $('#toggler').on("click", function () {
        $('#content').slideToggle("slow", function () {
            if ($(this).position().top + $(this).height() > $(this).parent().innerHeight()) {
                //$(this).parent().scrollTop($(this).position().top - 10);
                $(this).parent().scrollTop($(this).position().top - $(this).parent().innerHeight() + 100)
            }
        });
    });
});
我按照您建议的代码更新了原始帖子，但是它无法工作。 - user2252219
@user2252219 我稍微更新了我的答案，同时将所有代码都放在了答案中，因为我在使用fiddle时遇到了一些困难。 - Aleks G
1
如果您希望窗口滚动到切换的文本部分，可以执行以下操作：
$(document).ready(function () {
    $('.toggle').on("click", function () {
        $('.content').slideToggle("slow", function () {
            $(window).scrollTop($(this).offset().top + $(this).height());
        });
    });
});

这段代码的作用是在按钮点击事件中将窗口滚动到切换文本的底部。

这里有一个fiddle。

希望这可以帮助你。

0

你是说这个吗？http://jsfiddle.net/2r89M/1/ 将你的HTML代码用

标签包围起来。

<div class="wrapper">
  <div class="container">
    <p>aaaaaaaa</p><!-- this is the content above -->
    <!-- Your code here -->
  </div>
</div>

然后添加以下的CSS代码：
.wrapper {
    height: 300px;
    position: relative;
}
.container {
    position: absolute;
    bottom: 0px;
}
有没有可能让文本始终距离视口底部100像素，从而将其上方的任何内容向上推动？我已经在原帖中更新了一张图片，希望能有所帮助。 - user2252219
是的，当然。http://jsfiddle.net/raffi/2r89M/4/ 只需删除包装器并将“bottom: 100px”赋予容器即可。 - raffi
0
你可以自己创建这个效果。
将 JavaScript 更改为以下内容：
$(document).ready(function(){
    $(".box").on("click", '.toggle',  function(){
        $(this).prev('.content').toggleClass('visible');
    });
});

您还需要更新布局。

<div class="box">
    <div class="content">content...</div>
    <div class="toggle">More information</div>

    <div class="content">content...</div>
    <div class="toggle">More information</div>
</div>

CSS应该如下：

.content {
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: all 1s ease;
}

.content.visible {
    max-height: 500px;
}

Fiddle

的意思是：

0

可以通过检测已打开元素的底部位置轻松实现，如果切换后的已打开元素超出了视口，则可以找到外部元素的像素数量，并将窗口滚动相同的数量到底部。

$('.toggle').on("click", function () {
        var elem = $(this);
        elem.next().slideToggle(500, function () {
            var topp = elem.next().offset().top;
            var heghtp = elem.next().height();
            var bottomp = topp+heghtp;
            var wpos = WH+WS;
            if(bottomp>wpos){
                var toSlideUp = bottomp-wpos;
                var Pos = WS+toSlideUp;
                $('html,body').animate({scrollTop:Pos},500);
            }
        });
    });

我已经在这里实现了相同的功能，请查看jsfiddle

0

您可以通过操作窗口的滚动条并将其动画化，以使切换的内容向上移动，具体方法如下：

$(document).ready(function () {
  $('.toggle').on("click", function () {
    $(this).next('.content').slideToggle("slow", function () {
        var offset = $(this).offset().top;
        $("html, body").animate({
            scrollTop: offset
        });
    });
  });
});

旁注：这种方法的缺点是必须等待动画完成

演示

如果你想要两个动画同时发生，可以使用CSS过渡效果，如下所示：

CSS：

.content {
  /*existing styles*/
  max-height:1000px; /*large value*/
  -webkit-transition: max-height 1s ease-in-out;
  -ms-transition: max-height 1s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  transition: max-height .5s ease-in-out;
}
.hidden {
  overflow:hidden;
  max-height:0 !important;
}

JS：

$('.toggle').on("click", function () {
  var $content = $(this).next('.content');
  $content.toggleClass("hidden");
  if (!$content.hasClass("hidden")) {
      var offset = $content.offset().top;
      $("html, body").animate({
        scrollTop: offset
      }, 500);
  }
});

演示

0

它考虑了底部边距并且看起来非常干净。

$.fn.notOnScreenHeight = function(){
     var viewportBottom = $(window).scrollTop() + $(window).height();
     var contentBottom = this.offset().top + this.height();

     return contentBottom - viewportBottom;
};

$(document).ready(function () {
    var margin = 100;    
    $('.toggle').on("click", function () {
        $(this).next('.content').slideToggle("slow",function () {
             var notOnScreen = $(this).notOnScreenHeight();            
             if (notOnScreen > 0 ) {
                var scrollTo = $(window).scrollTop() + notOnScreen + margin;
                $("html, body").animate({scrollTop: scrollTo}, 'slow');
            }
        });
    });
});

这里是fiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接