jQuery 多个div显示与隐藏

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

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

希望可以给出两种方案的代码。可以用在不同的页面
展开
 我来答
全国流窜
2015-09-25 · TA获得超过403个赞
知道小有建树答主
回答量:417
采纳率:50%
帮助的人:169万
展开全部
$(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", 然后再点时,判断一下即可。如果存在值,则删除自定义属性,关闭。
自己能做么?如果能做,我就不再写代码了。
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式