手風琴元素身高問題

Question

我已經實現了2種Accordians爲有一個問題我的應用 - 1列和2列

林與1分的列手風琴的靜態高度。我一直試圖整天修改JavaScript，但似乎無法使它工作。

高地應該在根據數據量高度動態的，但是如可以看到高度是固定的，並且一些數據被得到切斷： http://www.davincispainting.com/whydavincis.aspx

其他2列手風琴具有幾乎相同的JavaScript作爲1列手風琴，但是高度dynanmic取決於有多少數據是： http://www.davincispainting.com/glossary.aspx

我會提供一個小提琴但是現在數據動態：
這裏是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- esque，並且你的整個代碼看起來很複雜。

---

如果你改變了你的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更乾淨的代碼。