javascript - 如何显示和隐藏内部 div onclick 最多 3 个级别？

Question

我的页面中有以下结构

HTML：

        <div style="position:relative; width:200px; height:100px; overflow:hidden;">
                <div style="position:absolute;" id="innerDiv">
                    <table style="width:400px;height:50px;" border="1" id="innerTable">
                        <tr>
                            <td>
                                <div id="td1"class="monthDiv" style="white-space:nowrap;">
                                    2000
                                </div>
                                <div id="td2" style="white-space:nowrap;">
                                <table>
                                    <tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr>
                                </table>
                                </div>
                            </td>

                            <td>
                               <div id="w" style="white-space:nowrap;">
                                    2001
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

JAVASCRIPT：

    $("#td1").click(function(){
        $("#td1").hide('slow');
        $("#td2").show('slow');
    });

    $("#td2").click(function(){
        $("#td2").hide('slow');
        $("#td1").show('slow');
    });
    $("#quarter1").click(function(){

        });
$("#quarter2").click(function(){

        });

因此，当我单击时，'td1'(2000)我正在显示，反之亦然，但单击时'td2'(JAN-JUN00 AND JUL-DEC00)'我需要显示另一个。我还需要找到触发了哪个点击事件，或者显示div(JAN00 FEB00 ... JUN00)'quarter1'div'quarter1''quarter2'(JUL00 AUG00 ... DEC00)

请帮我。

Answer 1

您可以简单地调用要在单击时显示的show事件：divquarter1

$("#quarter1").click(function(){
   alert('quarter1');
   $('#quart1').show('slow');
});
$("#quarter2").click(function(){
   alert('quarter2');
   $('#quart2').show('slow');
});

quart1并且quart2是您要显示的ids 中的s。div

编辑：

添加这个：

$("#td1").click(function(e){
    e.stopPropagation();
    $("#td1").hide('slow');
    $("#td2").show('slow');
});

$("#td2").click(function(e){
    e.stopPropagation();
    $("#td2").hide('slow');
    $("#td1").show('slow');
});