Question

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

我对1列手风琴的静态高度有疑问。我一直在努力修改JavaScript，但似乎无法让它工作。

高度应该在高度上是动态的，具体取决于数据量，但是正如您可以看到高度是固定的，并且一些数据被切断： http://www.davincispainting.com/whydavincis.aspx enter image description here

另外2列Accordian与1列Accordian几乎相同的JavaScript，但是Height是dynanmic，具体取决于有多少数据： http://www.davincispainting.com/glossary.aspx enter image description here

我会提供一个小提琴，但数据现在是动态的：
以下是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的高度。< / p>

你应该可以通过更改它来修复它：

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

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

手风琴元素高度问题

1 个答案: