Question

我正在尝试在我的网站上运行自定义目录工具提示，我想让它看起来和操作与Google Image搜索一样，即您点击图片，然后有关图片的信息显示在在它下面的行，你点击其他东西，然后第一行消失，显示第二行。

我从未在jQuery上表现出色但是我已经设法得到它以便它将我设置为隐藏的单元格内容插入到您单击的单元格下面的一行中，但是我不知道在点击某些内容时填充行后，我们知道在删除内容方面要去哪里。

我做了一个fiddle page，它显示了我正在寻找的基本内容以及我所处的位置，但我不确定从哪里开始

HTML

<div class="container">
    <table class="catalogue">
        <tr>
            <td><a href="#">Click</a><div class="content">This is Cell 1 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 2 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 3 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 4 content</div></td>
        </tr>
        <tr>
            <td><a href="#">Click</a><div class="content">This is Cell 5 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 6 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 7 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 8 content</div></td>
        </tr>
        <tr>
            <td><a href="#">Click</a><div class="content">This is Cell 9 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 10 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 11 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 12 content</div></td>
        </tr>
    </table>
</div>

CSS

.container {
    width:600px;
    margin:0 auto;
}

.catalogue {
    border-collapse:collapse;
    width:100%;
}

.catalogue td {
    height:80px;
    text-align:center;
    background:#e0e0e0;
}

.catalogue td a {
    display:inline-block;
    color:#fff;
    text-decoration:none;
    padding:5px 10px;
    background:#000;
}

.catalogue .tooltip td {
    width:100%;
    padding:1.5em;
    text-align:left;
}

.catalogue .content {
    display:none;
}

JQuery的

$('.container').delegate('a', 'click', function() {
    cell_content = $(this).parent().find('.content').text();
    button_row = $(this).closest('tr');
    button_row.after('<tr class="tooltip"><td colspan="4">' + cell_content + '</td></tr>');
});

Answer 1

我最终将我的布局从一个表格更改为一系列对齐div，这样做效果更好。我已经设法编写了Javascript，以便它能够读取每行中有多少项，然后在使用清除间隔符在其下面添加新div之前循环遍历这些项目。

这个更新版本是从我工作的实时版本修改的，虽然我打算将来更新它，以便它将工具提示信息作为AJAX查询提取，因为它在当前方法中有点陈旧。如果有人想修改或改进此代码，请执行以下操作：）

Updated Demo

HTML

<div class="container">
    <div class="catalogue">
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 1 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 2 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 3 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 4 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 5 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 6 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 7 content</div></div>
            <div class="catalogue-item"><a>Click</a><div class="content">This is Cell 8 content</div></div>
    </div>
</div>

JQuery的

$('.container').delegate('.catalogue-item a', 'click', function() {
    // Sets variables about the settings of the row and cell clicked
    catalogue_container = $('.container');
    catalogue_width = catalogue_container.width();
    cell = $(this).closest('div.catalogue-item');
    cell_width = cell.width();
    cell_content = cell.find('.content').html();
    cell_position = Math.floor(cell.position().left / cell_width);

    // Returns possible total cells available in container width
    row_cells = Math.floor(catalogue_width / cell_width);

    for (var i = cell_position; i < row_cells; i++) {
        cell = cell.next('.catalogue-item');
    }

    cell_prefix = '<div class="clearfix catalogue-tooltip">';
    cell_suffix = '</div>';

    // Checks to see if there are any tooltips already entered
    if (typeof old_content !== 'undefined') {
        // Checks to see if the tooltip is already out
        if ($('.catalogue-tooltip').length && cell_content != old_content) {
            old_tooltip = $('.catalogue-tooltip');
            $('.catalogue-tooltip').slideToggle(800, function() {
                old_tooltip.remove();
                cell.after(cell_prefix + cell_content + cell_suffix);
                old_content = cell_content;
                $('.catalogue-tooltip').slideToggle(800);
            });
        } 
    } else {
        cell.after(cell_prefix + cell_content + cell_suffix);
        old_content = cell_content;
        $('.catalogue-tooltip').slideToggle(800);
    }
});

以谷歌图片的风格显示表格内容

1 个答案: