Jquery事件作为副作用被触发。如何阻止这种情况

我有一个特殊的要求，有一个切换表。通过切换，我指的是一个表，它将在超链接的事件单击时展开和折叠

我如何制作表格的片段如下：

     <table class=".table" border="1">
     <tr id="1">
        <td><a href="#" class="action" id="a-1">+</a></td>
        <td>Superman</td>
     </tr>
     <tr id="version" class="child 1">
        <td></td>
        <td>Weight</td>
     </tr>
     <tr id="type" class="child 1">
        <td></td>
        <td>Height</td>
     </tr>
     <tr id="pl-id" class="child 1">
        <td><a href="#" class="action" id="a-1-101">+</a></td>
        <td>Planet</td>
     </tr>
     <tr id="KP" class="child 1-101">
        <td></td>
        <td>KP</td>
     </tr>
     <tr id="MN" class="child 1-101">
        <td></td>
        <td>MN</td>
     </tr>
     ..
     ..

点击

-

对抗处于第一状态的超人时，应该进入第二状态，而不是第三状态

JQuery我写过这样的代码：

$().ready(function() {
            $('.child').hide();
            $('.action').click(function(){

                var id = $(this).attr('id');
                var idarray=id.split("-");
                var len = idarray.length;

                if(len==2)
                    {
                        id = id.substring(2);

                        if($(this).parent().parent().next().attr('style')=="display: none; "){
                            $('tr[class^=child '+id+'-1]').hide();
                            $('tr[class=child '+id+']').show();
                        }
                        if($(this).parent().parent().next().attr('style')=="display: table-row; "){
                            $('tr[class^=child '+id+'-1]').hide();
                            $('tr[class=child '+id+']').hide();
                        }

                    }
                else if(len==3)
                    {
                        //HAVEN'T REACHED TILL RESOLVING FOR 3 :(
                        /*id = id.substring(2);
                        alert(id);
                        $("."+id).toggle();
                        $('tr[class^=child '+id+']').hide();
                        $('tr[class=child '+id+']').show();*/

                    }
            });
        });

使用此JQuery单击带有

id=a-1

display:none block

的超链接会执行，但由于显示/隐藏其内部的函数，它会自动触发

display:table row

block。 没有重新单击，那么为什么再次模拟单击事件。我不希望显示：执行表行块。当前，当html页面加载时，表处于第二种状态，即使在对超人单击

+

后，它仍然处于相同的状态，因为if和else条件都得到了评估，从而将其恢复到原始状态

如何以简单的方式实现这一要求。我是JQuery新手，已经尝试了很多事情，以至于我完全糊涂了。有人能告诉我一种方法吗。请给出有效或接近有效的解决方案。请不要提供文档的链接

---

谢谢。

问题在您的参考中。请注意，JQuery使用Sizzle选择器，它基本上为您提供了CSS样式的元素引用

这种引用不起作用：

$('tr[class=child '+id+']').show();

您需要使用属性列表选择器：

$('tr[class~=child][class~='+id+']').show();

或者，更好的方法是处理CSS类（除非需要模糊匹配，否则不要对ID或类使用属性选择器）：

说了这么多。。。我强烈建议您查看您的实现。使用容器对象，而不是使用具有半隐藏行的表。它将大大简化您的代码并使更新更容易。正如你所拥有的。。。好吧，我很同情下一个不得不介入并努力维护它的人

将我的脚本修改为

    $('.action').click(function(){

            var id = $(this).attr('id');    
            var idarray=id.split("-");
            var len = idarray.length;
            id = id.substring(2);

    if($(this).parent().parent().next().attr('style')=="display: none; "){
            $('tr[class=child '+id+']').show();
            $('tr[class^=child '+id+'-]').show();
            return false;
    }
    if($(this).parent().parent().next().attr('style')=="display: table-row; "){
            $('tr[class=child '+id+']').hide();
            $('tr[class^=child '+id+'-]').hide();
            return false;
    }

现在这个很好用。解决我问题的那一行是

returnfalse。它停止了JQuery事件的副作用

来自的输入对它进行了更多的思考，使它工作起来，也不那么笨拙。
主要问题是Jquery事件作为副作用被触发，我如何阻止它
if（$（this）.parent（）.parent（）.next（）.attr（'style'）==“display:none；”）在单击超链接后最初执行
，但由于其中写入的代码，
if（$（this）.parent（）.parent（）.next（）.attr（'style'）==“display:table row；”
也会执行。我只想执行其中一个，而不是两个。我使用的是
$（'tr.child.+id）.show（）选择方法现在，标签以前也被正确选择过，但这确实让它不那么笨拙。但是问题仍然存在，因为如果执行了
两个
块，我想我不理解你的问题。我想你需要的只是一个
否则，如果这里有
。）
$('tr.child.'+id).show();

    $('.action').click(function(){

            var id = $(this).attr('id');    
            var idarray=id.split("-");
            var len = idarray.length;
            id = id.substring(2);

    if($(this).parent().parent().next().attr('style')=="display: none; "){
            $('tr[class=child '+id+']').show();
            $('tr[class^=child '+id+'-]').show();
            return false;
    }
    if($(this).parent().parent().next().attr('style')=="display: table-row; "){
            $('tr[class=child '+id+']').hide();
            $('tr[class^=child '+id+'-]').hide();
            return false;
    }