javascript - 添加div onClick功能并切换div

Question

我刚刚构建了此页面，我试图创建一个事件，其中单击任务矩阵(来自第 1 部分)- 将出现第 2 部分，然后单击第 2 部分，第 1 部分-将出现 3。

我在 Toggle_division_add_Link 的帮助下编写了这个示例 html

<!-- So far I have tried this Jquery-->

<script>
    function addCode(){
        var newCode= '<div class="2">2</div>'
        alert(1);
        $('.1').click(function(){
            var $this = $(this), $2=$this.next('.2');
            alert(2);
            if ($2.length) {
               $2.toggle();
            } 
            else {
                $(newCode).insertAfter($this);
            }
        )};
    };
    addCode();
</script>

  

.header2{
    background-color:rgba(0,0,0,0.1);;
    padding:5px;
    display: inline-block;
}

<!-- Section 1-->
<div class="header2">
    <div class="taskMatrix"><span>Task Matrix</span></div>
    <div class="handOver"><span> Handover</span></div>
    <div class="teamDetails"><span>Team Details</span></div>
</div>

<!-- Section 2-->
<div class="header3">
    <div class="addTask" style="display:inline-block"><span>Task Matrix Report</span></div>
    <div class="addTask" style="display:inline-block"><span>Add Task</span></div>
</div>

<!-- Section 3-->
<div class="body1" style="color:green">
    <nav>
        Current Task<br>
        Handover<br>
        PrioritiseTask<br>
    </nav>
    <section>
        <table>
            <thead>
                <tr>
                    <th>Task Matrix</th>
                    <th>Tirthankar</th>		
                    <th>Sandip</th>
                    <th>Arnab</th>
                    <th>Rajdeep</th> 
                </tr>
            </thead>
            <tr>
                <td>Upload Daily Dashboard</td>
                <td>y</td>
                <td>y</td>
                <td>y</td>
                <td>n</td>
            </tr>
            <tr>
                <td>Upload Daily Dashboard</td>
                <td>y</td>
                <td>y</td>
                <td>n</td>
                <td>n</td> 
            </tr>
            <tr>
                <td>Send 1pm CST report</td>
                <td>n</td>
                <td>n</td>
                <td>y</td>
                <td>y</td>
            </tr>
            <tr>
                <td>Send 3pm CST excel</td>     
                <td>y</td>
                <td>n</td>
                <td>y</td>
                <td>n</td> 
           </tr>
           <tr>
                <td>Send 5pm CST report</td>
                <td>y</td>
                <td>y</td>
                <td>y</td>
                <td>y</td>  
           </tr>
           <tr>
                <td>Task update on the portal</td>     
                <td>y</td>
                <td>y</td>
                <td>y</td>
                <td>y</td>  
           </tr>
        </table>
    </section>
</div>

Answer 1

认为这就是你所追求的......

function addCode() { 
    var section3 = $('#section3');

    $('#taskMatrix').click(function(){
        $('#section2').toggle();

        if(section3.is(":visible")) {
            section3.toggle();
        }
    });

    $('#taskMatrixReport').click(function() {
        section3.toggle();
    });    
};

addCode();

http://jsfiddle.net/94fbouah/11/

1) 您使用的类不存在来绑定(bind)单击事件，因此它们都不起作用2)您正在使用的示例没有执行您想要的操作，因此您不需要其中的大部分内容3)还设置了一些display:none内联css，如果不需要加载时隐藏，可以删除