textarea點擊或聚焦時，將類添加到父div？

Question

如何添加一個類到textarea的父div當點擊或聚焦？

$(document).ready(function() { 
$('textarea').toggleClass(function() { 
    if ($(this).parent().is('.expandingArea')) { 
    return $(this).parent().addClass('open'); 
    } else { 
    return $(this).parent().removeClass('open'); 
    } 
}); 
}); 

Answer 1

您可以使用焦點和模糊來獲得此功能。

$('textarea').focus(function() { 
    $(this).parent().addClass('open'); 
}); 

$('textarea').blur(function() { 
$(this).parent().removeClass('open'); 
}); 

DEMO

Another One

Answer 2

$('.expandingArea > textarea').on({ 
    'focus' : function() { 
    $(this).parent().addClass('open'); 
    }, 
    'blur' : function() { 
    $(this).parent().removeClass('open'); 
    } 
}); 

Answer 3

$('textarea').on({ 
    'click': function() { 
     $(this).parents('div.expandingarea').addClass('open') 
    }, 
    'focus': function() { 
     $(this).parents('div.expandingarea').addClass('open') 
    }, 
    'blur': function() { 
     $(this).parents('div.expandingarea').removeClass('open') 
    } 
});​ 

jsFiddle example。