切换 jquery 展开时更改链接名称和图像答案

【问题标题】：Change link name & image when toggle jquery expanded切换 jquery 展开时更改链接名称和图像
【发布时间】：2012-02-18 21:39:29
【问题描述】：

我正在使用以下代码在单击链接时展开/折叠一些文本

当文本展开并具有不同的图像（即arrow_up.png）时，我需要将链接名称更改为“隐藏”。

我该怎么做？

<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() {
        $('div.view').animate({
          height: (($divView.height() == 90)? innerHeight  : "90px")
        }, 500);
        return false;
    });
});
</script>
<div class="view">
  <ul class="moduleItemExtraFields">
        <li>text here</li>
        <li>text here</li>
        <li>text here</li>
        <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">Show <img src="images/arrow_down.png" /></div>

【问题讨论】：

标签： php jquery toggle collapse

【解决方案1】：

<script type="text/javascript">

    //...

    $('div.slide').click(function() {

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

        // Switch between show/hide
        if (slideHtml.localeCompare('Show <img src="images/arrow_up.png" />') < 0)
           $(this).html('Show <img src="images/arrow_up.png" />');
        else
           $(this).html('Hide <img src="images/arrow_down.png" />');

        $('div.view').animate({
          height: (($divView.height() == 90)? innerHeight  : "90px")
        }, 500);
        return false;
    });

    //...
</script>

【讨论】：

当再次点击链接时？
谢谢...效果很好 - 除了我折叠它时 - 它仍然显示“隐藏”
当我扩展时，它很棒。但是当我崩溃时，它停留在 $(this).html('Show ');请问有什么想法吗？
我将字符串比较改为使用String.localeCompare。 jsfiddle.net/cjh5E

【解决方案2】：

我会在 div.slide 中添加/删除类以检查它是展开还是折叠。

DEMO这里

  $('div.slide').addClass('expanded');

  $('div.slide').click(function() {

    if ($(this).hasClass('collapsed')) {
        $('div.view').animate({ //expand
            height: (($divView.outerHeight() == 90) ? innerHeight : "90px")
        }, 500, function () {
         $divSlide.removeClass('collapsed').addClass('expanded');

         $divSlide.html ('Hide <img src="http://www.auto123.com/site/img/used/up_arrow.gif" />');
        });            

    } else {
        $('div.view').animate({
            height: '0px'
        }, 500, function () {
         $divSlide.removeClass('expanded').addClass('collapsed');

         $divSlide.html ('Show <img src="http://listedmag.com/images/down_arrow.gif" />');            

        }); //collapse
    }

【讨论】：