1

我目前正在开发我公司的网站，在画廊部分，经理们想要这样的设计：

屏幕

不幸的是，我不知道我该怎么做......我尝试搜索谷歌，但我没有找到任何东西。

它会是这样的，当您单击另一个时.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>

如果有人对我如何做到这一点有任何想法，我将不胜感激！

4

2 回答 2

1

经过2小时的搜索巨大的谷歌数据库，我终于找到了解决方案！

这里的链接：http ://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

这正是我想要的！感谢@Nathan Lee 的所有提示！

于 2013-06-05T07:13:38.987 回答
1

我在 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;
}
于 2013-06-05T07:55:40.237 回答