我有以下javascript片段:
for(var i=1;i<4;i++)
{
var img= ".img"+i;
$(img).on("click", function(){
var art = $(this).closest('article');
art.css('height', 'auto');
art.find('p').slideToggle(200);
if(this.src.indexOf("plus") > -1)
{
this.src = "images/min.png";
}
else
{
art.css('height', '62px');
this.src = "images/plus.png";
}
return false;
});
$(img).wrap($('<a>',{href: '#'}));
}
这调整了我的文章元素的高度,问题是文章相互干扰。我试图解决这个问题,但运气不好。我该如何解决这个问题?
你可以在我的网站上看到这个问题www.stijnaerts.be
例如,点击"about me"旁边的+,高度调整正确。现在点击"联系人"旁边的+,这将调整联系人文章的高度,也将调整文章"关于我"的高度。
我希望我已经把这个问题解释清楚了。
您正在容器上使用display: flex,因此这是flex的默认工作方式。为你的容器添加"align-items: flex-start;"以获得正确的高度。
.homediv { align-items: flex-start; }
你也应该知道flexbox目前还没有得到广泛的支持。这是一篇好文章http://css-tricks.com/snippets/css/a-guide-to-flexbox/