这是一个标题

Question

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

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

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

示例

这是一个标题

2014年8月1日13:37

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 repreptderit in voluptate velit esse cillum   dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat   非官方，在culpa qui officia deserunt mollit anim id est laborum中被捕。

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;}

任何帮助如何在用户点击“扩展”类的图像时如何顺利扩展？感谢帮助。

Answer 1

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

HTML

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

JS

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

另外，仍然不要忘记包含jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

你可以使用jQuery。

我为你制作了这个切换视图的功能，意思是首先点击它显示更多，第二次点击，它显示更少。该功能由on('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);
    });    
});

另请参阅this DEMO。

如果您只想扩展，而不是切换，那么您可以删除一些行并使用此代码：

$(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);
    });    
});

还有a DEMO。

扩展div的高度，而每个div都有相同的类

这是一个标题

2 个答案: