1

我正在尝试制作一个在您按下文本或图像时折叠和展开的脚本。图像是一个基本箭头，当它被展开时，它被一个向上的箭头所取代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>
4

4 回答 4

2

尝试

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

演示：小提琴

于 2013-08-16T10:47:56.053 回答
0

Problem is - you're using innerHTML it replaces all of your element HTML, to avoid it use append();

于 2013-08-16T10:45:48.727 回答
0

首先 $("#" + 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.
        });
    }

关于文本，您可以像当前更改图像一样更改它。

于 2013-08-16T10:49:32.110 回答
0

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             
            }
于 2013-08-16T10:50:10.230 回答