Question

我使用简单的切换功能来显示/隐藏每个元素的细节。不知何故，它不适用于某些行。我一直在寻找我的代码几个小时，我看不到任何错误。

要显示的代码：

    <tbody>                                                
    <?php 
        $parent='';
             if( substr($row['element'],0,4) != 'ZONE') {
                 $parent_p = ( !empty($parent) ) ? $parent : '';
                 $parent = $row['element'];

                 if( !empty($parent_p) && $parent != $parent_p ) echo '</tbody>';
            ?>
                <tr>
                    <td><a href="javascript:void(0)" onclick="$('#<?php echo $parent; ?>').toggle(500);"><img src="button_plus.png" width="10px"></a></td>
                    <td><?php echo $row['element']; ?>></td>
                </tr>                                  
                <?php } else { // if ?>
                <?php if( $parent != $parent_p ) { ?>   
                <tbody style="display:none" id="<?php echo $parent; ?>">
                <?php $parent_p = $parent; ?>
                <?php } ?>
                <tr>
                    <td></td>
                    <td>- <?php echo $row['element']; ?></div></td>
                </tr>  
                <?php } // elseif ?>
    <?php } ?>
</tbody>

像KEDAH / PERLIS，KUALA LUMPUR和SABAH这样的行没有奏效。它假设显示像MELAKA这样的子列表。

enter image description here

Answer 1

不要使用jQuery的属性/内联事件句柄。这会给页面增加很大的开销，并且可以使用单行jQuery附加的事件处理程序替换它。

针对您的具体情况进行更新

JSFiddle： http://jsfiddle.net/TrueBlueAussie/9kzdu8w4/3/

您在tbody元素后隐藏了tbody个元素，因此模式是使用tbody切换下一个closest('tbody')以找到您点击的当前tbody英寸

删除所有onclick=处理程序并将href=更改为href="#"
删除所有ignoreme=""属性（我没有时间手动删除所有onclick处理程序，因此我将其重命名）。
添加以下代码：

jQuery的：

 $(function () {
    // Listen for click events on any anchor in any TD in a table with ID="Table"
    $('#table td a').click(function (e) {
        // prevent the page moving to top when a bookmark # anchor is clicked
        e.preventDefault();
        // Toggle all the TRs following the current one, so long as they have class="detail"
        $(this).closest('tbody').next('tbody').toggle(500);
    });
 });

以下的上一个模型：

示例JSFiddle： http://jsfiddle.net/TrueBlueAussie/9kzdu8w4/2/

假设您的表的ID为＆＃34; table＆＃34;，并且要显示的详细信息位于以下行中，每个项目的HTML将如下所示：

<table id="table">
    <tr>
        <td><a href="#"><img src="button.png"></a>
        </td>
    <tr>
    <tr class="detail"><td>Some detail line</td></div>
    <tr class="detail"><td>Some detail line</td></div>
    <tr>
        <td><a href="#"><img src="button.png"></a>
        </td>
    <tr>
    <tr class="detail"><td>Some detail line</td></div>
    <tr class="detail"><td>Some detail line</td></div>
</table>

并且所需的代码可能如下所示：

$(function(){
    // Listen for click events on any anchor in any TD in a table with ID="Table"
    $('#table td a').click(function(e){
        // prevent the page moving
        e.preventDefault();
        // Toggle all the TRs following the current one, so long as they have class="detail"
        $(this).closest('tr').nextUntil(':not(.detail)').toggle(500);
    });
});

备注：

$(function(){ YOUR CODE });只是$(document).ready(function(){ YOUR CODE });的快捷方式，在执行该功能之前等待DOM准备就绪。

nextUntil是一个方便的jQuery方法，用于检索当前元素之后的兄弟元素，直到满足特定条件。

我在display: none行使用了detail CSS样式，因此它们最初是隐藏的。

切换可见性对某些行没有用？

1 个答案: