需要帮助形成Jquery滑动表行，如果鼠标悬停在上一个(向上)表行

Need help to form Jquery to slide a table row down if mouse hovers over previous(one up) table row

本文关键字：悬停 鼠标 如果 上一个 表行 向上 帮助 Jquery      更新时间：2023-09-26

目前为止只在页面加载时向上滚动，即使这样动画也是不稳定的又丑。我怀疑这与我想在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>

下面的工作很好，但它不能滑动表行上下，只是隐藏和显示。提供我将。itemdescription css display属性设置为none。

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

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

还有，你用错了closest。closest将在DOM中查找与所提供的选择器匹配的"最接近"父节点。您正在寻找next，它将选择以下行。

html: 

<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>
jQuery: 

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

这里的工作示例:http://jsfiddle.net/VKBYy/1/

相关文章：