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>