javascript - 使用带有表行的 SlideToggle(嵌套 div)不起作用

Question

经过阅读后，似乎在表行上使用 slideToggle() 的一个好解决方案是在其中嵌套一个 div。我尝试了以下方法，但似乎根本不起作用。

jQuery

function toggle_dropdown(entry_id) {

    $(".library-dropdown-animation").slideUp("slow"); // Slide up any that are open
    $(".library-edit-dropdown").style.display = "none"; // Set their table row displays to none
    $("#library-dropdown-animation-" + entry_id ).slideDown("slow"); // slide the clicked one down 
    $("#library-edit-dropdown" + entry_id ).style.display = "block"; // set it's parent table row's display to block
}

HTML

                        <tr class="library-item-header">
                            <td class="library-item-title" onclick="toggle_dropdown(123);" style="cursor: pointer;">
                                <a href="<?php echo get_permalink($anime_id); ?>"><?php echo $anime_name; ?></a>
                            </td>
                        </tr>

                        <tr id="library-edit-dropdown-123" class="library-edit-dropdown" style="display: none;">
                            <td colspan="4">
                                <div class="library-dropdown-animation" id="library-edit-animation-123">

                                </div>    
                            </td>                                    
                        </tr>

                        <tr class="library-item-header">
                            <td class="library-item-title" onclick="toggle_dropdown(124);" style="cursor: pointer;">
                                <a href="<?php echo get_permalink($anime_id); ?>"><?php echo $anime_name; ?></a>
                            </td>
                        </tr>

                        <tr id="library-edit-dropdown-124" class="library-edit-dropdown" style="display: none;">
                            <td colspan="4">
                                <div class="library-dropdown-animation" id="library-edit-animation-124">

                                </div>    
                            </td>                                    
                        </tr>

                        <tr class="library-item-header">
                            <td class="library-item-title" onclick="toggle_dropdown(125);" style="cursor: pointer;">
                                <a href="<?php echo get_permalink($anime_id); ?>"><?php echo $anime_name; ?></a>
                            </td>
                        </tr>

                        <tr id="library-edit-dropdown-125" class="library-edit-dropdown" style="display: none;">
                            <td colspan="4">
                                <div class="library-dropdown-animation" id="library-edit-animation-125">

                                </div>    
                            </td>                                    
                        </tr>

所以本质上，我在另一行中有一个 td，当单击它时，它会向下滑动其内容行(位于其正下方)，同时向上滑动任何其他行。因为我们不能在表格行上使用幻灯片(顺便说一下，hide() 和 show() 和 toggle() 工作得很好)我使用了一个包含内容的 div，在这个例子中我省略了内容。无论如何，使用此 jQuery 单击 td 不会执行任何操作。

这是一个jsFiddle:http://jsfiddle.net/wxu3E/

Answer 1

请检查此解决方案:http://jsfiddle.net/wxu3E/2/

我通过添加类来添加 anchor 本身的事件，而不是行，我还添加了属性entry_id

<a href="#" entry_id="124" class="toggle_dropdown">Click</a>

并且在 JQuery 代码中，事件将附加到具有类 toggle_dropdown

的元素

$(".toggle_dropdown").click