添加div onClick功能并切换div

Question

我只是建立了此页面，在这里我试图创建一个事件，单击“ 任务矩阵” （从第1节开始）-将出现第2节，然后单击第2节，将出现第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(){
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);
    }
  });
});

Answer 2

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

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）您使用的是不存在的类来绑定click事件，所以它们都不起作用2）您正在使用的示例并没有达到您想要的目的，因此您不需要大多数3）还设置了一些显示：无内联CSS，如果不需要隐藏则可以删除