firefox中的手風琴盒故障

Question

我有以下用JavaScript寫的操作滑動上/下框的功能。但在Firefox中，它發生故障。它只是打開/關閉一次。之後，沒有發揮。 我正在從盒子中獲取height（）參數並將其存儲在隱藏的輸入中。但firefox無法讀取框的正確高度。

看看代碼更好地理解：

JS：

function boxCollapse() { 
    $("#boxHeight").attr("value", parseInt($("#accTipsBox").height())); 
    $("#accTipsBox").animate({height:'0px'}); 
    $(".btnCollapse").css({display:'none'}); 
    $(".btnExpand").css({display:'block'}); 
    $("#accTipsBox").css({padding:'0px'}); 
} 

function boxExpand() { 
    $("#accTipsBox").animate({height: $("#boxHeight").attr("value")}); 
    $(".btnExpand").css({display:'none'}); 
    $(".btnCollapse").css({display:'block'}); 
    $("#accTipsBox").css({padding:'0px'}); 
} 

HTML：

<section class="accBox grey"> 
    <header> 
     <div class="title">DISCLAIMERS</div> 
     <a style="display: none;" class="btnExpand" href="javascript:void(0);"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a> 
     <a style="display: block;" class="btnCollapse" href="javascript:void(0);"><img src="/resources/images/boxCollapseGrey.jpg" alt="button"></a> 
    </header> 
    <div id="accTipsBox" style="height: 125px; padding: 0px;"> 
     <input type="hidden" id="boxHeight" value="125">  
     <div class="accBoxContent"> 
      <div><p></p><p></p><p></p></div> 
     </div> 
    </div> 
</section> 

Answer 1

我想這是你所追求的：

//bind a `click` event handler to all the elements with the `btnExpandCollapse` class 
$('.btnExpandCollapse').on('click', function (event) { 

    //stop the default behavior of clicking the link (stop the browser from scrolling to the top of the page) 
    event.preventDefault(); 

    //first select the parent of this element (`header` tag) and then get its sibling element that has the `accTipsBox` class, then take that element and slide it up or down depending on its current state 
    $(this).parent().siblings('.accTipsBox').slideToggle(500); 
}); 

稍微調整一下HTML：

<section class="accBox grey"> 
    <header> 
     <div class="title">DISCLAIMERS</div> 

     <!-- Notice there is only one link now that does the job of both --> 
     <a class="btnExpandCollapse" href="#"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a> 
    </header> 

    <!-- Notice I changed the ID attribute to CLASS so this code will work for repeated structure --> 
    <div class="accTipsBox" style="height: 125px; padding: 0px;"> 
     <div class="accBoxContent"> 
      <div> 
       <p>1</p> 
       <p>2</p> 
       <p>3</p> 
      </div> 
     </div> 
    </div> 
</section> 

這裏是一個演示：http://jsfiddle.net/VGN64/

下面是一些文檔：

• .slideToggle()：http://api.jquery.com/slidetoggle
• .siblings()：http://api.jquery.com/siblings

在一個側面說明， 一世F你想要的數據存儲有關的DOM元素，使用jQuery的$.data()方法：

var $box = $("#accTipsBox"); 
$.data($box[0], 'height', $box.height()); 

然後，您可以像這樣訪問

var height = $.data($('#accTipsBox')[0], 'height'); 

請注意，我追加[0]到jQuery對象的結束這個數據僅返回與該對象關聯的DOM節點，這是$.data()方法所要求的：http://api.jquery.com/jquery.data。這是存儲與DOM元素相關聯的數據的非常快速的方法。