1

我正在尝试在我的网站上使用自定义目录工具提示，我想让它的外观和操作方式与 Google 图片搜索相同，即您单击图片，然后有关图片的信息出现在下面的行中它，您单击其他内容，然后第一行消失，显示第二行。

我从来都不擅长 jQuery，但我设法得到它，以便它将我用 CSS 设置为隐藏的单元格内容拉入您单击的单元格下方的一行中，但我不知道当您单击某些内容时，一旦填充了该行，删除内容的去向。

我制作了一个小提琴页面，其中显示了我正在寻找的基本内容以及我在哪里，但我不确定从这里去哪里

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>');
});
4

1 回答 1

0

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

这个更新的版本是从我正在使用的实时版本修改而来的，尽管我打算在未来对其进行更新，以便将工具提示信息作为 AJAX 查询拉入，因为它在当前方法中有点过时。如果有人想修改或改进此代码，请这样做:)

更新的演示

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);
    }
});
于 2013-04-12T15:46:11.497 回答