jQuery切換幻燈片打開/關閉鏈接問題

Question

我有以下代碼，我用來顯示/隱藏列表中的元素。

我的問題是，它加載得很好，並打開/摺疊罰款。但是，一旦打開/關閉後，它會停留在最後一個向下的圖像上。我需要它總是顯示向下箭頭如果摺疊&向上箭頭如果展開。

讚賞任何幫助...謝謝

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var $divView = $('div.view'); 
    var innerHeight = $divView.removeClass('view').height(); 
    $divView.addClass('view');  
    $('div.slide').click(function() { 

     // Update the HTML in this element 
     var slideHtml = $(this).html(); 

     // Switch between show/hide 
     if (slideHtml.localeCompare('Hide/Show <img src="images/arrow_up.png" />') < 0) 
      $(this).html('Hide/Show <img src="images/arrow_up.png" />'); 
     else 
      $(this).html('Hide/Show <img src="images/arrow_down.png" />'); 
     $('div.view').animate({ 
      height: (($divView.height() == 90)? innerHeight : "90px") 
     }, 500); 
     return false; 
    }); 
}); 
</script> 
<div class="view"> 
    <ul> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    </ul> 
</div> 
<div class="slide">Hide/Show <img src="images/arrow_down.png" /></div> 

編輯::

就意識到，我上面的代碼工作以及在Chrome中。我的問題是它不適用於Firefox。

展開後，它很好（我有一個向上的箭頭）。 摺疊後，向上箭頭保持原位，不會被向下箭頭替換。

任何提示/幫助表示讚賞。

Answer 1

爲什麼不使用jQuery的切換功能？

http://api.jquery.com/toggle/

http://api.jquery.com/slideToggle/

不要使用localCompare您可以：

• 使用切換功能
• 使用布爾值

Answer 2

我完全不確定這是否是你想要的，因爲你沒有提供很多細節。但是你可以使用這個代碼。基本上，如果你點擊隱藏/顯示（或圖像），它將顯示視圖div。如果再次點擊，它會隱藏它。如果您單擊垃圾郵件，請注意此腳本不起作用。

<style> 
    #hs{ cursor: pointer; } 
    #down_arrow{ display: none; } 
    #view{display: none}; 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 


<script type="text/javascript"> 
$(document).ready(function() { 

    $("#hs").toggle(
     function(){ 
      $("#up_arrow").hide();$("#down_arrow").show("slow"); 
      $("#view").show("fast"); 
     }, 
     function(){ 
      $("#down_arrow").hide();$("#up_arrow").show("slow"); 
      $("#view").hide("slow"); 
     } 
    ); 


}); 


</script> 
<div id="hs"> 
    Hide/Show 
    <span id='up_arrow'><img src="images/arrow_up.png" /></span> 
    <span id='down_arrow'><img src="images/down_up.png" /></span> 
</div> 

<div id="view"> 
    <ul> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    <li>text here</li> 
    </ul> 
</div>