<div class='piece'>
    <div class='title'>
      title1
    </div>
    <div class='content'>
      content1
    </div>
<div>

<div class='piece'>
    <div class='title'>
      title2
    </div>
    <div class='content'>
      content2
    </div>
<div>

形如以上的代码，要求点击title2，隐藏content2，再点一下，显示content2。点title1，隐藏content1。。。。

应该是很常见的一种设计，可是我尝试用jquery做这种效果失败。。。

$("div.piece .title").click(function(){
    //这样做可以隐藏title本身
    $(this).css('display','none');
    //但这样似乎不能隐藏对应内容，甚至感觉lastChild都没有正确引用到content节点
    $(this).get().parentNode.lastChild.css('display','none');
});

请大家指教怎么改？或者给个范例链接，谢谢！
--
修改:HGL FROM 202.120.79.*
FROM 202.120.79.*

嗯，这个代码比我的精简多了，谢谢！
【 在 liangqing (^-^) 的大作中提到: 】
:     $(".piece .title").on("click", function() {
:         $(this).next().toggle();
:     })
: ...................
--
FROM 202.120.79.*