Question

我刚刚建立了这个页面，我正在尝试创建一个事件，点击任务矩阵（来自第1节） - 第2节将出现并点击Section-2，Section- 3将出现。

的帮助下编写了此示例html

＆＃13;

<!-- 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>

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

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，如果隐藏在不需要的负载上，则可以删除

添加div onClick函数并切换div

2 个答案: