Accordian Element Height Issue

问题描述

| 我为应用程序实现了2种Accordians类型-1列和2列我在1栏Accordian的静态高度上有问题。而且我整天都在尝试修改JavaScript，但似乎无法使其正常工作。根据数据量，高度在高度上应该是动态的，但是正如您所见，高度是固定的，并且某些数据已被截断： http://www.davincispainting.com/whydavincis.aspx 其他2列Accordian具有与1列Accordian几乎相同的JavaScript，但是Height是动态的，具体取决于有多少数据： http://www.davincispainting.com/glossary.aspx 我会提供一个小提琴，但是数据现在是动态的：这是针对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
                        },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; 
}

解决方法

问题出在您存储高度的方式上，在此注释之后：

// 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更为干净。

accordian element element height height issue issue