Show/Hide 每次单击箭头时显示文本

Question

我需要帮助 showing/hiding 单击按钮（特别是箭头）上的文本。我有一段隐藏的文本，我需要在与箭头旋转 180 度一致的时间内将其向下滑动。我还希望它只对单击的箭头上方的 post 执行此操作。我在这个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";
    });
});

这些是我遇到的问题：

滑的太快了
一旦向上滑动就不会再向下滑动。
它为每个 post 执行一次

Answer 1

我猜你应该将 100% 转换为像素（用 $(this).parent().innerHeight() 或类似的东西，然后它工作得很好。
您应该建立某种切换：跟踪哪个 blog-post/arrow 是向上的，哪个是向下的（用某种 [=25= 标记博客 post 或箭头]) 并基于此，你应该让它向上或向下滑动。
当然，您指的是带有 css 选择器的 post。您应该结合使用 $(this)、.next() 和 .prev() 函数以获得正确的 post(s).

Answer 2

解决第2点：

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

Answer 3

"It slides down way too fast"

只需设置一个动画持续时间。请参阅 jquery.animate() 文档。

似乎 jquery 在使用百分比制作动画时有很多错误。 http://bugs.jquery.com/ticket/10669 http://bugs.jquery.com/ticket/9505 Try using pixels instead of percentage http://jsfiddle.net/8obybt1d/1/

"Once it slides back up it won't slide down again."

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

一段粗略的代码：

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

"It does it for every post"

尝试使用 'this' 关键字。

Answer 4

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

首先，我们将在数组中的所有 .blog-post div 中取出 height。
现在制作 div 的 height: 50px，一旦我们知道所有 div's 的实际高度。这将有助于 div 平滑滑动，因为我们知道高度。
接下来单击箭头 class，我们将 切换 class，其中包含 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

有不明白的可以追问

Show/Hide 每次单击箭头时显示文本

Show/Hide Text Every Time An Arrow Is Clicked

html

javascript

css

jquery

jsfiddle