javascript - Accordion 元素高度问题

Question

我为我的应用程序实现了 2 种类型的 Accordion - 1 列和 2 列

我对 1 Column Accordian 的静态高度有疑问。我整天都在尝试修改 JavaScript，但似乎无法让它工作。

高度应该是动态的，具体取决于数据量，但是正如您所看到的，高度是固定的，并且一些数据被 chop 了: http://www.davincispainting.com/whydavincis.aspx

其他 2 列 Accordion 具有与 1 列 Accordion 几乎相同的 JavaScript，但是高度是动态的，具体取决于有多少数据: http://www.davincispainting.com/glossary.aspx

我会提供一个 fiddle ，但数据现在是动态的:
这是 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>

这是相关的 HTML:

<div id="mid-feature-client">
    <div id="mid-featureleft-client">
            <div id="glossary_first" class="controlbox">
            <br /><br />
        </div>
        <div style="clear: both;">
        </div>
    </div>
</div>

这是相关的 CSS:

#mid-featureleft-client .controlbox {
    width:546px;
    padding:3px 0 0 6px;
    position:relative; 
    /*background-color:green;*/
}
#mid-featureleft-client .glossarycontrolbox {
    width:260px;
    padding:3px 0 0 6px;
    position:relative; 
    float:left;
    /*background-color:blue;*/
}    
.question-clicked {
    background-color: #CCCCCC;
    color: #0C2A55;
    /*margin-top: 10px;*/
    /*padding: 2px 5px 0;*/
}
.questionLink-clicked {
    color: #0C2A55;
    font-size: 1.2em;
    font-weight: bold;
}
.answerbox {
    padding: 3px 5px 3px 5px;
}

.questionLink {
    color: #0C2A55;
    font-size: 1.2em;
    font-weight: bold;
}
.glossquestion {
    padding: 0 5px 4px 0;
}
.glossanswer {
    background-color: #F9FBFC;
    display: none;
}
#accordion .handle {     
    width: 260px;     
    height: 30px;     
    background-color: orange; 
} 
#accordion .section {     
    width: 260px;     
    height: 445px;     
    background-color: #a9a9a9;    
    overflow: hidden;     
    position: relative; 
} 
dt { 
    /*background-color: #ccc;*/
} 
dd { 
    /*height: 30px;*/
} 
.active {
    background: #a9a9a9; 
}

Answer 1

问题在于您存储高度的方式，在此评论之后:

// 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>";
});

为此:

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++;
});

我只是想指出，我的修复程序看起来不太像 jQuery，而且您的整个代码看起来很复杂。

---

如果您将 JSON 更改为如下内容:

[{"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>";
});

这比在 $.each 中递增我们自己的变量 i 更简洁。