Question

我目前正致力于根据内容动态扩展div的解决方案。我几乎得到了一个解决方案，但是想知道是否有人可以检查代码以确保其有效并符合最佳实践？

有问题的page。

，代码是：

<script>
$(document).ready(function()
  {
   $(".row").each(function() { 
           $(this).height($(this).find('.topHeight').height()); 
            //Only shrink div if the user has javascript on.
    });

   $(".btns").click(function(){ //On click of the expand button    

        var el = $(this).closest('div[class^="row"]');//The Div Element to be animated.
        var curHeight = el.height(); //The current height.
        var fullHeight = el.height('auto').height(); //Temporarily sets the height to auto and returns it to the variable "fullHeight".
        el.height(curHeight); //Resets the height to the previous height.
        var minHeight = $(this).closest('div[class^="topHeight"]').height() + 10;//Gets the minimum height setting from CSS.

        if (el.height() != fullHeight) { //If the div is not at full height

            el.stop().animate({height: fullHeight}, 500);
             //Animate to full size.
           el.find('#open').html('Click to Read less');

        } else if (el.height() != minHeight) { //else if it is not at minimum height

            el.stop().animate({height: minHeight}, 1500, 'easeInOutQuart');
             //then shrink to minimum height.
             el.find('#open').html('Click to Read More');

        }
    });
});
</script>

它对我来说看起来有点无效，但到目前为止，这是我能让它正常工作的唯一方法！

所以真的只是寻找一些指示，

谢谢，亚当

Answer 1

对于该功能似乎有点复杂？

如果我理解正确的话，我就会这样做：

$('.row').find('button').click(function(){
    $(this).closest('.shadow').find('.extra').slideToggle();
});

其余的只是CSS。

工作JSFiddle

拓展部门的最佳实践

1 个答案: