0

我有以下代码用于显示/隐藏列表中的元素。

我遇到的问题是它可以正常加载，并且可以正常打开/折叠。但是在您打开/关闭一次后，它会停留在最后一张图片上。如果折叠，我需要它始终显示向下箭头，如果展开，则始终显示向上箭头。

任何帮助表示赞赏...谢谢

<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 中不起作用。

展开后就好了（我有一个向上的箭头）。折叠后，向上箭头保持原位，不会被向下箭头替换。

任何提示/帮助表示赞赏。

4

2 回答 2

0

为什么不使用 jQuery 的切换功能？

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

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

不要使用 localCompare 你可以：

  • 使用切换功能
  • 使用布尔值
于 2012-01-28T15:55:35.360 回答
0

我完全不确定这是否是您想要的，因为您没有提供很多细节。但是您可以使用此代码。基本上，如果您单击隐藏/显示（或图像），它将显示视图 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>
于 2012-01-28T16:09:18.120 回答