jQuery显示/隐藏<span>和<a></a> </span>

时间:2015-03-27 07:43:02

标签: javascript jquery html css

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>

Test

要扩展/崩溃的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时,如何才能使其生效?它不仅应该是扩展/折叠列表的加号图标,而是图标和项目名称

4 个答案:

答案 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')
});