当每个div具有相同的类时，在高度上扩展div

Question

我目前的问题是，我正在用一些小文章制作新闻提要。所有的文章都有相同的类，这就是逻辑。每篇文章的右上角都有一个向下的箭头。

我希望如果人们单击箭头（这是一个. svg文件），内容会展开。容器的高度为78px，如果单击按钮，它应该会展开，因此高度应该是自动的。

我的问题是我不知道用什么语言做什么。jQuery或者我读到的是JS。因为如果我正常点击按钮，这个类的所有内容都会扩展，或者得到自动高度的css。我只希望1个容器扩展。我想一些主动元素或聚焦方法？我不知道。

例子

八月1,2014在13:37

Lorem ipsum dolor sit amet，concetetur adipising elit，sed do eiusmod tempor incidiut ut labore et dolore magna aliqua。Ut enim ad minim veniam，quis nostrud execution ullamco laboris nisi Ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。除非圣奥恰塔特·库皮达特（sint occaecat cupidatat）非冒失，否则他必须为自己的行为负责。

HTML

<article class="newsfeed_item">
<img src="../images/arrow_down.svg" alt="" class="expand" />
<div class="newsfeed_image"><img src="../images/example-img.jpg" alt="" /></div>
<h1>This is a title</h1>
<footer class="extra_info">August 1, 2014 at 13:37</footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

CSS

article.newsfeed_item               {border-bottom:1px solid #ccc; width:100%; height:78px; clear:both; position:relative; overflow:hidden;}
article.newsfeed_item h1            {}
article.newsfeed_item p             {padding-bottom:5px; line-height:16px;}
article.newsfeed_item .expand       {height:20px; position:absolute; top:10px; right:0; padding:0 5px;}
article.newsfeed_item .expand:hover {cursor:pointer; background:#a2c139;}
.expanded                           {height:auto;}
footer.extra_info                   {font-family:"GudeaRegular"; font-size:10px; color:#999;}

当用户点击带有“expand”类的图片时，有什么帮助吗？感谢您的帮助。

Answer 1

匿名用户

您可以为此使用jQuery。

我给你做了这个切换视图的函数，意思是第一次点击它显示更多，第二次点击，它显示更少。该函数由（'Click'，...）部分的触发。

通常您会将高度设置为自动，但这不起作用。所以我们首先需要知道实际高度是多少。为此，我们将CSS高度设置为auto，然后获取高度，并将其重置为原始高度。然后我们对其进行动画处理。

$(document).ready( function() {
    $("img.expand").on('click', function() {
        var p = $(this).parent();
        var currentHeight = p.height();

        if( currentHeight == 78 ) {
            p.height('auto'); /* set to auto */
            var newHeight = p.height(); /* get the actual height */
            p.height( currentHeight ); /* reset the height */
        }
        else {
            var newHeight = "78px";
        }
        $(this).parent().animate({ height : newHeight }, 1000);
    });    
});

另外，请参阅此演示。




如果您只想将其展开，而不想切换，则可以去掉一些行并使用以下代码：

$(document).ready( function() {
    $("img.expand").on('click', function() {
        var p = $(this).parent();
        var currentHeight = p.height();
        var newHeight = p.height('auto').height(); 
        p.height( currentHeight );        
        $(this).parent().animate({ height : newHeight }, 1000);
    });    
});

还有一个演示。

Answer 2

编辑：新答案应该会更好。

HTML

`<div id='newsbox'><img id='toggler'>toggle me</div>`

JS公司

$("#toggler").click(function(){
    $("#newsbox").animate({height:50 - $("#newsbox").height()},200);
});

此外，仍然不要忘记包括jQuery