jQuery 多个div显示与隐藏

Question

$(document).ready(function () {
});
function toggle() {
$(".box").slideToggle(500);//显示隐藏切换,参数可以无,参数说明同上
}

用上面代码，点击的话，所有的.box同时显示或同时隐藏
我想要单个显示或隐藏的话应该怎样改
要是想在某个显示的时候，其它已经显示出来的就隐藏，又怎么改

希望可以给出两种方案的代码。可以用在不同的页面

Answer 1

$(function(){
  $(".box").css("display", "none");
  $(".lnk").each(function(i){
      $(this).click(function(){
        $(".box").slideUp(500);
        $(".box:eq("+i+")").slideDown(500);
        return false;
      });
  });
});<style> li {margin: 0px; padding: 0px;} </style>
<ol>
    <li><a href="#" class="lnk">a</a>
    <div class="box" style="background-color: yellow;">a<br/>a<br/>a<br/></div></li>
    <li><a href="#" class="lnk">b</a>
    <div class="box" style="background-color: yellow;">a<br/>a<br/>a<br/></div></li>
    <li><a href="#" class="lnk">c</a>
    <div class="box" style="background-color: yellow;">a<br/>a<br/>a<br/></div></li>
    <li><a href="#" class="lnk">d</a>
    <div class="box" style="background-color: yellow;">a<br/>a<br/>a<br/></div></li>
    <li><a href="#" class="lnk">e</a>
    <div class="box" style="background-color: yellow;">a<br/>a<br/>a<br/></div></li>
</ol>

追问

先谢谢。代码我测试了一下，如果是点击A展开，又点击A的话，它是收起又展开，而不是收起。

追答

改一下即可。
比如，当其展开时，给当前div一个自定义属性：data-open="1", 然后再点时，判断一下即可。如果存在值，则删除自定义属性，关闭。
自己能做么？如果能做，我就不再写代码了。