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>

jQuery切换幻灯片打开/关闭链接问题

2 个答案: