隐藏/显示切换具有相同类名的单独 div

我有一个 UL 列表，每个 LI 都有一个隐藏的 DIV，以及一个显示隐藏 DIV 的“更多信息”链接。 但是，单击此按钮也会显示所有其他 LI 的隐藏 DIV。

我怎样才能只隐藏/显示 LI 中的 DIV，而不显示所有其他隐藏的 DIV？

如果我点击其中一个，如何隐藏其他的？我想将这部分分开，以防以后我想删除它。

另外，单击时我希望“更多信息”链接中的文本更改为“隐藏”。

这是我当前的脚本：

$(window).load(function() {

$('.grey_button a').toggle(function() {
    $('.job_description').slideDown('');
    return false;
  },
    function() {
      $('.job_description').slideUp('');
    return false;
  });

});

以下 jQuery 应该可以工作：

$('.grey_button a').toggle(function() {
    $(this).closest('li').find('.job_description').slideDown();
    return false;
  },
    function() {
      $(this).closest('li').find('.job_description').slideUp();
    return false;
  });

这假设 HTML 类似于以下内容：

<ul>
    <li><span class="grey_button"><a href="#">Show more information</a></span>
        <div class="job_description">Job information...</div></li>
    <!-- other list items... -->
</ul>

JS 小提琴演示 http://jsfiddle.net/davidThomas/pGjEX/1/.

顺便说一句，不需要将空字符串传递给slideUp()/slideDown()，如果没有传递参数（整数（以毫秒为单位的数字）或字符串），将使用默认值 400 毫秒。

参考：

• closest() http://api.jquery.com/closest/.
• find() http://api.jquery.com/find/.