Question

我正在处理一个项目的小问题。

它可能非常简单，但我并不过分熟悉jquery并且遇到一些问题。我基本上想要一个包含4个项目行的网格，一旦用户点击div，它就会滑出与网格项目相同的生物量（25％）。然后将它旁边的div推到一个新行。

为了给一个＆＃34;我们的团队提供一个想法＆＃34;页面，此页面将显示网格中每个人的照片，如果他们点击该人，则会滑出他们的生物。

这是我的代码：

HTML

<div class="team-list one-fourth nomargin">
     <div class="team-photo">
         <img class="front" src="{front_image}" alt="{title}" />
     </div>
     <div class="team-bio">
         team bio here
     </div>
</div>

CSS

/* THE TEAM PAGE */
.team-list {
    position:relative;
}

.team-list .team-photo img {
    max-width:100%;
}

http://jsfiddle.net/7bJML/

非常感谢您提前提供任何帮助！

Answer 1

据我了解你看起来像这样。我希望它会有所帮助

为滑动生物信息添加此处理程序：

$('.team-photo').click(function() {
    $(this).next().slideToggle();
});

和CSS：

/* THE TEAM PAGE */
.team-list {
    position:relative;
    cursor: pointer
}

.team-list .team-photo img {
    max-width:100%;
}

.team-bio {
    display: none;
}

http://jsfiddle.net/QrfzA/

使用jQuery＆amp ;;切换滑出div将div推到新线上

1 个答案: