CSS3+JQuery - SlideDown画廊
我目前正在开发我公司的网站，在画廊部分，经理们想要一个这样的设计：
不幸的是，我不知道我该怎么做。我试着在谷歌上搜索，但什么也没找到。
它可能是这样的，当你点击另一个.item时，它会关闭当前打开的项目并打开新的项目……箭头应位于项目下方，并以其居中。此外，当您点击.item.open <a>链接时，它会关闭"pop- below“(类似于弹出窗口，但在下方而不是在...)如果它是打开的。
我知道我的JQuery代码将类似于：
$('.item a').click(function(e) {
if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open'); // which would slide the details up
} else {
var $id = $(this).data('item-id');
getItemDetail($id);
}
e.preventDefault();
});下面是我将使用的HTML示例：
<div class="container">
<div class="projects">
<div class="item">
<a href="#item" data-item-id="exempleid" class="item-link">
<img src="" alt="item">
</a>
<!-- HERE GOES THE DETAIL-PANE -->
</div>
</div>
</div>如果有人对我如何做到这一点有想法，我将不胜感激！
回答 2
Stack Overflow用户
发布于 2013-06-05 15:13:39
经过2个小时的搜索，我终于找到了解决方案！
这里的链接是：http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
这正是我想要的！感谢所有的提示@Nathan Lee！
Stack Overflow用户
发布于 2013-06-05 15:55:40
我在jsFiddle上拼凑了一些东西：http://jsfiddle.net/8TfCZ/4/
它不像OP的答案中的文章链接中演示的那么漂亮，但如果有人决定破解自己的代码，它可能会成为另一种方法的起点。
JS：
(function($) {
// Display a 'popover' below a element
var displayMenu = function(el) {
// Display location = (el's position + its height + 1px border)
var bottomOfEl = $(el).offset().top + $(el).height() + 1 + 'px';
// Add bottom margin to parent <ul> equivalent to popover height
$(el).parent().addClass('active');
// Display popover
$('#popover')
.hide()
.css({
'height': '0',
'top': bottomOfEl
})
.show()
.animate({'height': '80px'}, 'fast');
};
$(document.body).on('click', '.item', function(e) {
// Close all others .item elements
$('.item').not(this).removeClass('open');
// Remove bottom margin from all other .item-lists
$('.item-list').not( $(this).parent() ).removeClass('active');
// Open this
$(this).addClass('open');
// Display popover relative to this element
displayMenu(this);
});
})(jQuery);HTML：
<div id="popover" class="popover"></div>
<ul class="item-list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="item-list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>CSS：
.popover {
display: none;
position: absolute;
width: 100%;
height: 80px;
background: blue;
}
.item-list {
padding: 0;
width: 100%;
}
.item-list.active {
margin-bottom: 80px;
}
.item {
position: relative;
list-style-type: none;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
padding-right: 5px;
cursor: pointer;
}
.item:before {
content: '.item';
}
.item.open:before {
content: '.open';
}
.item.open:after {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 0px;
left: 50%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid blue;
margin-left: -10px;
}https://stackoverflow.com/questions/16933166
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号