0

以下は、ホバー時に折りたたみdivを展開するためのコードです。div 内のハイパー リンクを複数回クリックした後、またはマウスを複数回ホバーした後、マウスを離したときに div が表示の高さに折りたたまれないことがあります。

マウスアウト時にdivのスタイルプロパティで設定された高さにdivを折りたたむ方法はありますか? 私の例のページは次のとおりです : http://apparelnbags.com:8000/showproduct2.aspx?ProductID=829

 <script type='text/javascript' src='/jscripts/jquery-1.5/jquery-1.5.js'></script>

         <script type="text/javascript">
             $(document).ready(function () {
                 var divHeight;
                 var contentHeight ;
                 $('.expand').hover(function () {
                     divHeight = $(this).height();
                     contentHeight = 0;
                     $(this).children().each(function () {
                         contentHeight += $(this).height();
                     });
                     if (divHeight < contentHeight) {
                         $(this).animate({
                             height: contentHeight
                         }, 300);
                     }
                 }, function () {
                     if (divHeight < contentHeight) {
                         $(this).animate({
                             height: divHeight
                         }, 300);
                     }
                 });
             });
        </script>

Divのcssは

div.expand
{
    border: 1px solid #C8C8C8;overflow-y: scroll; -ms-overflow-y:scroll;
}

部門コードは

<div class="text_theme_red_bold" style="Display:block;margin-top: 15px;width:438px">Active Colors:<br/>
    <div id="Color_Active"  class="expand"  style="Display:block;margin-top: 8px;padding:5px 0px 5px 5px;  height:36px;">
        (!Dynamic_Contents!)
    </div>
</div>
4

2 に答える 2

0

このJSを試してください：

 $(document).ready(function () {
     var startHeight = $('.expand').height();
     var fullHeight = 0
     $('.expand').children().each(function () {
         fullHeight += $(this).height();
     });
     $('.expand').mouseenter(function(){
         $(this).stop();
         $(this).animate({
             height: fullHeight
         }, 320);
     });
     $('.expand').mouseleave(function(){
        $(this).stop();
        $(this).animate({
            height:startHeight
        }, 320);         
     });
 });
于 2013-07-15T20:38:30.600 に答える