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)' 反之亦然，但我需要当点击 'quarter1' 时显示另一个 div(JAN00 FEB00 ... JUN00)。此外，我还需要找到在哪个 div 上触发了点击事件，'quarter1' 或 'quarter2' 以显示 (JUL00 AUG00 . ..DEC00)

请帮帮我。

Answer 1

您可以简单地在 div 上调用 show 事件以在单击 quarter1 时显示:

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

quart1 和 quart2 是您要显示的 div 的 id。

编辑:

添加这个:

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

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