javascript - jQuery 显示/隐藏 和

Question

HTML 代码:

<div class="project_id">
    <span title="View Details" class="project_toggle  project_toggle_off" data-task="14"></span>
    <a id="proj_14" class="project_class">Test Project</a>
</div>
<div style="display: none;" id="task_proj_14" class="task_project_id">Some Hidden Content</div>

展开/折叠的 jQuery 代码:

//this function is used to toggle project list
        $('.project_toggle').click(function () {
            var $this = $(this);
            $this.toggleClass('project_toggle_off project_toggle_on');
            $("#task_proj_" + $this.data('task')).slideToggle();
            $this.attr('title', $this.hasClass('project_toggle_off')? 'View Details' : 'Hide Details')
        })

CSS:

.project_toggle_on {
    background: url("../images/minus.jpg") no-repeat scroll 0 0 / 12px auto rgba(0, 0, 0, 0);
    cursor: pointer;
    padding-right: 20px;
}

.project_toggle_off {
    background: url("../images/plus.jpg") no-repeat scroll 0 0 / 12px auto rgba(0, 0, 0, 0);
    cursor: pointer;
    padding-right: 20px;
}

当用户点击 PLUS 图像时，元素会展开，但是当用户点击 PLUS 图标或 Project Name< 时，我该如何让它工作 ?它不仅应该是展开/折叠列表的加号图标，而且应该是图标和元素名称

Answer 1

使用此代码。您可以将事件附加到多个元素。检查DEMO .

HTML

 <div class="project_id">
   <span title="View Details" class="project_toggle  project_toggle_off" data-task="14"></span>
  <a id="proj_14" class="project_class">Test Project</a>
 </div>

jQuery:

$(document).ready(function(){
 $(document).on('click','.project_toggle,.project_class',function (event){
   if(event.target.nodeName.toLowerCase() == 'a'){
       var $this = $(this).parent('div').find('span');
    }else{
       var $this = $(this);
    }

    $this.toggleClass('project_toggle_off project_toggle_on');
    $("#task_proj_" + $this.data('task')).slideToggle();
    $this.attr('title', $this.hasClass('project_toggle_off')? 'View Details' : 'Hide Details')
 });
});