0

如果有人可以帮助我，我需要重新设计我的 jquery 代码的帮助。我想扩展多个类别而不滑出其他类别。这是我滑动一张桌子的实际代码。

提前谢谢。

html

<table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

jQuery

$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();

    $research.find(".accordion").click(function(){
        $research.find('.accordion').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});

http://jsfiddle.net/URh2W/

4

1 回答 1

1

我会完全避免使用任何表格，特别是如果您要为元素制作动画。我强烈建议使用 Divs 代替！

此外，不惜一切代价避免使用内联样式，特别是避免内联宽度声明。

这是 JSFiddle：

http://jsfiddle.net/Ec3hJ/

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="research" width="100%">
    <div class="accordion">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div><a href="" title="Edit">Editati</a> | <a class="a_del" href="" title="Delete">Stergeti</a></div>
    </div>

让我知道这是否有助于您朝着正确的方向前进。如果您完全不喜欢使用表格，它可能会也可能不会工作，但您可以尝试将这些 Div 转换回表格......您不必更改 CSS 或 JS。

于 2013-08-06T21:01:34.853 回答