Javascript 如果鼠标悬停在上一个（上一个）表行上，需要帮助形成Jquery以向下滑动表行

到目前为止，只在pageload上向上滚动，即使这样，动画也会抖动 而且很丑。我怀疑这与我想在tr元素上使用这个有关

<table>

    <tr class="ItemHeading">
    <td>ItemName</td>
    </tr>

    <tr class="ItemDescription">
    <td>
    <ul>
    <li>Item spec</li>
    </ul>
    </td>
    </tr>

    </table>

    <script type="text/javascript">



    $(".ItemDescription").slideUp(300);

        $(".ItemHeading").hover(function () {
            $(this).next("tr").slideDown(300);
        });


        $(".ItemHeading").mouseleave(function () {
            $(this).next("tr").slideUp(300);
        });

 //  $(document).ready(function() {  $(".ItemDescription").slideUp(300); } );
    </script>

---

我强烈建议不要使用带有动画的桌子。它不会给你你想要的结果

此外，您使用的

最近的
也不正确<代码>最近的
将在DOM中查找与提供的选择器匹配的“最近的”父级。您正在查找
next
，它将选择下一行

html:

这里的工作示例：
谢谢，但有趣的是，slideUp和slideDown都是由悬停事件触发的，并且不会相互干扰？我原以为它必须像mouseleave一样触发slideUp？
hover
有两种不同的语法<代码>悬停（handlerIn（e）、handlerOut（e））

或仅

悬停（handlerInOut（e））

。请参阅此处的文档：更明确地说，我传递的第一个函数仅在悬停时执行，而第二个函数仅在悬停时执行。当您只指定一个函数悬停时，该函数将同时运行两次。例如，您可以只传递一个带有切换的函数，它将在悬停时打开，在您离开时关闭。

    $('.ItemHeading').hover(function () {
    $(this).next("tr").css("display", "block");
    $(this).mouseleave(function () { $(".ItemDescription").css("display", "none"); });

});

<div class="table">

    <div class="tr ItemHeading">
        <div class="td">ItemName</div>
    </div>

    <div class="tr ItemDescription">
        <div class="td">
            <ul>
                <li>Item spec</li>
            </ul>
        </div>
    </div>

</div>

$(".ItemDescription").slideUp(300);

$(".ItemHeading").hover(
    function () {
        $(this).next(".tr").slideDown(300);
    },
    function() {
        $(this).next(".tr").slideUp(300);
    }
);