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，在此示例中我已经把内容遗漏了。在任何情况下，单击td都不会使用此jQuery。

这是一个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

Answer 2

工作Jsfiddle：http://jsfiddle.net/patelmilanb1/LzaZT/

建议：数据属性可能在这里派上用场了......我在你的HTML中添加了data-attribute，请在jsfiddle中仔细查看HTML。

data-id="123"

所以你的最终Jquery看起来像这样：

 $(document).on("click", ".library-item-title", function (e) {
        e.preventDefault();
        var entry_id = $(this).data("id");
        toggleDropdown(entry_id);
    });

    function toggleDropdown(entry_id) {
        $(".library-edit-dropdown").slideUp("slow");
        $("#library-edit-dropdown-" + entry_id).slideDown("slow");
    }

您的代码出错：您在此行的末尾缺少-，因为您的DIV ID deos包含-

$("#library-edit-dropdown" + entry_id ).style.display = "block";

尝试动画的小提琴：http://jsfiddle.net/patelmilanb1/LzaZT/1/

function toggleDropdown(entry_id) {
    $(".library-edit-dropdown").hide("slow");
    $("#library-edit-dropdown-" + entry_id).show("slow");
}

使用带表格行的slideToggle（嵌套div）不起作用

2 个答案: