jQuery, javascript slideToggle()答案

【问题标题】：JQuery, javascript slideToggle()jQuery, javascript slideToggle()
【发布时间】：2013-08-16 10:42:30
【问题描述】：

我正在尝试制作一个在您按下文本或图像时折叠和展开的脚本。图片是一个基本箭头，当div 展开时，它被一个向上的箭头所取代。

我的问题是当我切换 div 时文本消失了。我应该如何编写我的代码，所以无论div 是否扩展，标题都会保留？我想在几个divs 上使用以下脚本。

此外，slideToggle() 函数不能双向工作，我该如何解决？

<script type="text/javascript">
        function toggle(divId, switchImgTag) {
            var ele = document.getElementById(divId);
            var imageEle = document.getElementById(switchImgTag);
            $("#" + divId).slideToggle("fast");
            if (ele.style.display == "block") {
                ele.style.display = "none";
                imageEle.innerHTML = '<img src="images/arrow_down.png">';
            }
            else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="images/arrow_up.png">';                    
            }
        }
    </script>

还有 HTML：

<a id='imageDivLink' href="javascript:toggle('skills', 'imageDivLink');">
     <h2>Skills And Expertise</h2>
     <img class='arrow' src='images/arrow_down.png'>
</a>
<div id='skills' style='display:none;'>
     Lorem Ipsum...
</div>

【问题讨论】：

标签： javascript jquery slidetoggle

【解决方案1】：

试试

function toggle(divId, switchImgTag) {
    var ele = $("#" + divId);
    var imageEle = $('#' + switchImgTag).find('img');
    if (ele.is(':visible')) {
        imageEle.attr('src', "images/arrow_down.png");
    } else {
        imageEle.attr('src', "images/arrow_up.png");
    }
    $("#" + divId).slideToggle("fast");
}

演示：Fiddle

【讨论】：

这太完美了！正是我想要的！谢谢！

【解决方案2】：

首先 $("#" + divId).slideToggle("fast");在你的情况下是没用的，因为你在它之后使用简单的 jquery 手动进行切换。阅读http://api.jquery.com/slideToggle/，在你理解它之后，你可以从那时起删除所有内容。

还可以使用“完成”回调在动画结束时添加您的“个人风格”。

你的函数应该是这样的：

    function toggle(divId, switchImgTag) {
        var ele = document.getElementById(divId);
        var imageEle = document.getElementById(switchImgTag);
        $("#" + divId).slideToggle('fast', function() {
          // Change icon.
          // Change text.
        });
    }

关于文字，你可以像现在改变图片一样改变它。

【讨论】：

【解决方案3】：

innerHTML 替换整个元素（影响子元素）。

因此，像下面这样处理img 标签

if (ele.style.display == "block") {
                ele.style.display = "none";
                $('.arrow').prop('src', 'images/arrow_down.png'); //change like

            }
            else {
                ele.style.display = "block";
                $('.arrow').prop('src', 'images/arrow_up.png');  //change like             
            }

【讨论】：

【解决方案4】：

问题是 - 您正在使用 innerHTML 它替换了所有 HTML 元素，以避免它使用 append();

【讨论】：