Javascript 手风琴元素高度问题

我已经为我的应用程序实现了两种类型的手风琴——1列和2列

我有一个问题的静态高度为1列手风琴。我整天都在试图修改JavaScript，但似乎无法让它正常工作

根据数据量，高度应该是动态的，但是正如您所看到的，高度是固定的，并且一些数据被切断：

其他2列Accordian的JavaScript与1列Accordian几乎相同，但高度是动态的，具体取决于数据量：

我会提供一个小提琴，但是数据现在是动态的：
下面是解决问题的JavaScript：

    <script type="text/javascript">
    $.fn.accordion = function () {
        return this.each(function () {
            $container = $('#mid-featureleft-client');
            $container.find("dt").each(function () {
                var $header = $(this);
                var $selected = $header.next();

                $header.click(function () {
                    $('.active').removeClass('active');
                    $(this).addClass('active');
                    if ($selected.is(":visible")) {
                        $selected.animate({
                            height: 0
                        }, {
                            duration: 300,
                            complete: function () {
                                $(this).hide();
                            }
                        });
                    } else {
                        $unselected = $container.find("dd:visible");
                        $selected.show();
                        var newHeight = heights[$selected.attr("id")];
                        var oldHeight = heights[$unselected.attr("id")];

                        $('<div>').animate({
                            height: 1
                        }, {
                            duration: 300,
                            step: function (now) {
                                var stepSelectedHeight = Math.round(newHeight * now);
                                $selected.height(stepSelectedHeight);
                                $unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
                            },
                            complete: function () {
                                $unselected.hide().css({
                                    height: 0
                                });
                            }
                        });
                    }
                    return false;
                });
            });
            // Iterate over panels, save heights, hide all.
            var heights = new Object();
            $container.find("dd").each(function () {

                $this = $(this);
                $this.css("overflow", "hidden");
                heights[$this.attr("id")] = $this.height();
                $this.hide().css({
                    height: 0
                });
            });
        });
    };

    $(document).ready(function () {
        $.getJSON('FaqsJson.ashx?factType=2', function (datas) {
            var str_one = "";
            str_one = "<dl>"

            $.each(datas, function () {
               str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
               str_one += "<dd class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
            });
           str_one += "</dl>"; 

            $("#glossary_first").html(str_one);
            $("#mid-featureleft-client").accordion();
        });        
    });
</script>

---

问题在于您存储高度的方式，在这条评论之后：

// Iterate over panels, save heights, hide all.

具体而言，这一行：

heights[$this.attr("id")] = $this.height();

您的

dd

元素没有

id

，因此在循环的每次迭代中，

heights[''']

被设置为当前

dd

的高度

您应该能够通过更改以下内容来修复它：

$.each(datas, function () {
    str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
    str_one += "<dd class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
});

您可以这样做：

$.each(datas, function (i, v) {
    str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
    str_one += "<dd id=\"Dd" + i + "\" class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
});

$。每个（数据、函数（i、v）{
str_one+=“”；
str_one+=“这个[‘答案]+”；
});

---

这比在

$内增加我们自己的变量
i
更干净。每个
似乎都起到了作用，尽管它截断了其中一个数据-“强烈推荐”其中有一个单词包装。高度不能容纳下一行的单个单词。你是在直播新版本吗？这样，就更容易检查了。还有，我突然想到了这一点：最好还是让JavaScript保持原来的样子，而是用服务器端代码在每个
dd
中添加一个唯一的
id
（就像你在词汇表页面上所做的那样）。@Paul：我添加了对我所说内容的解释。如果你不能让它工作，那就坚持你所拥有的。
$.each(datas, function () {
    str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
    str_one += "<dd class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
});

var i = 0;
$.each(datas, function () {
    str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
    str_one += "<dd id=\"rand_" + i + "\" class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
    i++;
});

[{"Question1":"..","Answer1":".."},{"Question2":"..","Answer2":".."}, .. ]

$.each(datas, function (i, v) {
    str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
    str_one += "<dd id=\"Dd" + i + "\" class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
});