HTML CODE:
<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
时,如何才能使其生效?它不仅应该是扩展/折叠列表的加号图标,而是图标和项目名称
答案 0 :(得分: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')
});
});
答案 1 :(得分:0)
将手柄放在包含div
的位置以增加命中区域:
<div class="project_id project_toggle project_toggle_off" title="View Details" data-task="14">
<a id="proj_14" class="project_class">Test Project</a>
</div>
$('.project_toggle').click(function () {
var $this = $(this);
$this
.toggleClass('project_toggle_off project_toggle_on')
.attr('title', $this.hasClass('project_toggle_off')? 'View Details' : 'Hide Details');
$("#task_proj_" + $this.data('task')).slideToggle();
})
然后,代码中的span
也可以被删除,因为它是多余的。
答案 2 :(得分:0)
您可以将click事件放在父div上:
HTML:
<div class="project_id" class="project_toggle project_toggle_off" data-task="14">
<span title="View Details"></span>
<a id="proj_14" class="project_class">Test Project</a>
</div>
JS:
$('.project_toggle').click(function () {
var $this = $(this);
$this.toggleClass('project_toggle_off project_toggle_on');
$("#task_proj_" + $this.data('task')).slideToggle();
$this.find('span').attr('title', $this.hasClass('project_toggle_off')? 'View Details' : 'Hide Details')
});
答案 3 :(得分:0)
试试这个
<强> 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" data-task="14">Test Project</a>
</div>
<强> Jquery的强>
$('.project_toggle').click(function () {
$(this).toggleClass('project_toggle_off project_toggle_on');
$("#task_proj_" + $(this).data('task')).slideToggle();
$(this).find('span').attr('title', $(this).hasClass('project_toggle_off')? 'View Details' : 'Hide Details')
});