JQuery，javascript slideToggle（）

我试图制作一个脚本，当你按下文本或图像时，它会折叠和展开。图像是一个基本箭头，当展开

div

时，它将被指向上方的箭头所取代

我的问题是，当我切换div时，文本消失了。我应该如何编写代码，这样无论

div

是否展开，标题都会保持不变？我想在几个

div

s上使用以下脚本

此外，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>

功能切换（divId、switchImgTag）{
var ele=document.getElementById（divId）；
var imageEle=document.getElementById（switchImgTag）；
$（“#”+divId）.slideToggle（“快速”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
imageEle.innerHTML=''；
}
否则{
ele.style.display=“块”；
imageEle.innerHTML=''；
}
}

以及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>

乱数假文。。。

问题是-您正在使用

innerHTML

它替换所有元素HTML，以避免使用

append（）

试试看

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");
}

演示：

首先是$（“#”+divId）；在您的情况下，这是没有用的，因为您可以在切换之后使用简单的jquery手动进行切换。阅读，理解之后，你就可以从这一点上删除所有内容

还可以使用“完成”回调在动画结束时添加“个人触摸”

您的函数应该如下所示：

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

---

关于文本，您可以按照当前更改图像的方式更改它。

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             
            }

---

这太完美了！正是我要找的！非常感谢。