2011-05-25 135 views
0

我已经实现了2种Accordians为有一个问题我的应用 - 1列和2列手风琴元素身高问题

林与1分的列手风琴的静态高度。我一直试图整天修改JavaScript,但似乎无法使它工作。

高地应该在根据数据量高度动态的,但是如可以看到高度是固定的,并且一些数据被得到切断: http://www.davincispainting.com/whydavincis.aspx enter image description here

其他2列手风琴具有几乎相同的JavaScript作为1列手风琴,但是高度dynanmic取决于有多少数据是: http://www.davincispainting.com/glossary.aspx enter image description here

我会提供一个小提琴但是现在数据动态:
这里是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; 
} 

回答

0

的问题与方法你在储存高度后,稍加点评:

// 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更干净的代码。

+0

它似乎有诀窍,虽然它截断了其中一个数据 - “强烈推荐”,其中有一个单词换行。高度不适应包装到下一行的单个单词。 – Paul 2011-05-26 01:52:27

+0

你是否将新版本直播?这样,检查起来会更容易。另外,这只是让我头脑发热:离开原来的JavaScript会更好,并且用你的服务器端代码为每个dd添加一个唯一的'id'(就像你在您的术语表页面上做)。 – thirtydot 2011-05-26 01:56:48

+0

@保罗:我补充说明了我在说什么。如果你不能实现它,那么就坚持你拥有的东西。 – thirtydot 2011-05-26 09:52:49