显示隐藏的变量问题

Question

 我想点dt显示dd的高度，但是现在两个共用一个变量，会有问题，要怎么解决？

 var flag = true;
 $(".accountList2 dt").click(function(){
    if(flag){
         $(this).next().animate({height : "10px"}, 300); 
    }else{
         $(this).next().animate({height : "0"}, 300);   
        flag=false;
    }
    flag =!flag;
  });




<dl class="accountList2">
    <dt>股东0001</dt>
    <dd>........</dd>
    <dt>股东0002</dt>
    <dd>........</dd>
    <dt>股东0003</dt>
    <dd>........</dd>
 </dl>

Answer 1

问题是显而易见的，你若干个 dt 怎么可能只用一个 flag 来保存状态？

@竹林子 的办法不错，配合CSS是可以实现你那个效果的，也可以通过在 DOM 中加 class 的方法来保存状态

javascript$(".accountList2 dt").click(function() {
    var dt = $(this);
    if (dt.is(".collapse")) {
        dt.next().animate({
            height: "10px"
        }, 300);
        dt.removeClass("collapse");
    } else {
        dt.next().animate({
            height: "0"
        }, 300);
        dt.addClass("collapse");
    }
});

除此之外，用 $.fn.data()，$.fn.attr() 等都可以将状态保存到DOM上。

如果你还是想为每个DT设置一个 flag，可以考虑用这种方法

javascript$(".accountList2 dt").each(function() {
    var flag = true;
    $(this).click(function() {
        if (flag) {
            $(this).next().animate({
                height: "10px"
            }, 300);
        } else {
            $(this).next().animate({
                height: "0"
            }, 300);
            flag = false;
        }
        flag = !flag;
    });
});

Answer 2

建议

$(".accountList2 dt").click(function(){
    var obj = $(this).next();
    if(obj.is(':hidden')) {
         obj.slideDown(300); 
    }else{
        obj.slideUp(300);
    }
  });