Question

我需要在按钮点击（特别是箭头）上显示/隐藏文本的帮助。我有一个隐藏的文本块，我需要在与旋转180度的箭头一致的情况下将其向下滑动。我也希望它只针对点击箭头上方的帖子执行此操作。我在fiddle中提出的解决方案存在很多问题。

以下是代码：

$(function () {
    var angle = -180,
        height = "100%";
    $(".down-arrow").click(function () { 
        $(".down-arrow").css({
            '-webkit-transform': 'rotate(' + angle + 'deg)',
            '-moz-transform': 'rotate(' + angle + 'deg)',
            '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)',
        });

        $(".blog-post").animate({
            'height' : height
            });
        angle -= 180;
        height = "50px";
    });
});

这些是我遇到的问题：

它滑得太快了
一旦它向上滑动，它就不会再次向下滑动。
它适用于每个帖子

Answer 1

我猜您应该将100%转换为像素（使用$(this).parent().innerHeight()或类似的东西，然后才能正常运作。
您应该构建某种切换：跟踪哪个博客帖子/箭头已经启动，哪个博客/箭头已关闭（标记博客帖子或带有某种类的箭头）并且基于此，您应该让它向上或向下滑动。
当然，你指的是带有css选择器的帖子。您应该使用$(this)，.next()和.prev()函数的组合来获得正确的帖子。

Answer 2

＆＃34;它滑得太快＆＃34;

设置动画持续时间。请参阅jquery.animate（）文档。

在使用百分比进行动画制作时，似乎jquery非常错误。 http://bugs.jquery.com/ticket/10669 http://bugs.jquery.com/ticket/9505尝试使用像素而不是百分比http://jsfiddle.net/8obybt1d/1/

＆＃34;一旦它向上滑动，它就不会再次向下滑动。＆＃34;

因为您没有将高度值更改回百分百

一段粗略的代码：

if (height == "50px") {
    height = "100%";
}
else {
   height == "50px"
}

＆＃34;它适用于每个帖子＆＃34;

尝试使用＆＃39;这个＆＃39;关键词。

Answer 3

使用起来会更加动态和干净：

首先，我们将获取数组中所有height div的.blog-post个。
现在我们知道所有height: 50px的实际高度，然后创建div的div's。这将有助于使div平滑滑动，因为我们知道高度。
接下来点击箭头类，我们将切换类，其中包含transform:rotate属性。与此同时，我们将检查相应的.blog-post div的高度。因此，如果它超过50px我们会将其设为50px，否则我们会从数组中获取它的实际height并给它。

这是JS / JQuery代码：

var totalNum = $('.blog-post').length; // Counting number of .blog-post div on page.
var i, myArray = [];
for (i = 0; i < totalNum; i++) {
    var curHeight = $('.blog-post:eq(' + i + ')').outerHeight();
    myArray.push(curHeight);
}

$('.blog-post').css('height', '50px');

$('.down-arrow').click(function () {
    $(this).toggleClass('invert');
    var index = $('.down-arrow').index(this);
    var heightCheck = $('.blog-post:eq(' + index + ')').outerHeight();
    if (heightCheck < 51) {
        $('.blog-post:eq(' + index + ')').css('height', myArray[index] + 'px');
    } else {
        $('.blog-post:eq(' + index + ')').css('height', '50px');
    }
});

Working : Fiddle

如果您仍然不明白，请随时提出。

Answer 4

解决第2点：

$(".blog-post").animate({
...
    height = (height === "50px") ? height = "100%": height = "50px";
});

每次单击箭头时显示/隐藏文本

4 个答案: