如何通过单击链接（使用 JavaScript）使 div 标签向上或向下移动？

Question

我有 4 个“标题”（它们是一个 div 标签，带有一个链接，可打开每个标题的隐藏区域...这是为了整齐地组织移动设备的所有内容，同时仍然有大量内容）重点是我得到在这里...这些标题在折叠时大小相同，但在展开时大小不同。

我需要做的是单击一个链接，标题会向上移动，单击另一个链接，标题会向下移动。所以我有 1,2,3,4...我在 2 上单击“向上”，现在 2 是 1 所在的位置，1 是 2 所在的位置。

目前，我的标题 1 位于顶部，然后是需要经常编辑的内容，然后是其他 3 个标题。我只想添加一个“向上”链接和一个“向下”链接，将整个 div 与其上面/下面的一个交换

编辑：现在，我

function toggle() { 
    var ele = document.getElementById("toggleText");
    if(ele.style.display == "block") {
            ele.style.display = "none"; 
    }
    else {
        ele.style.display = "block";    
    }
}

为每个标题（所以 4 个单独的 javascript 函数）

和简而言之，这就是我的页面的样子：

--导航链接

--
~~标题 1~~
内容
~~标题2~~
~~标题3~~
~~标题 4~~

当它们折叠时，只有一个中断标签将它们分开。我想向每个标题添加一个链接，这样当我单击它时，它将与其上面/下面的标题交换位置。

这有助于更好地解释吗？

如果可能的话我更愿意坚持使用 Javascript

Answer 1

这听起来像是制表符和手风琴模式的组合。看一下这里：

http://docs.jquery.com/UI/Accordion

Answer 2

我只是想确保我走在正确的轨道上。我怀疑我可以用普通的 Javascript 来做到这一点，所以我使用了 jQuery。这是我相信你想要的小提琴？

http://jsfiddle.net/jT2gS/3/

Answer 3

像这样的东西对你有用，概念证明使用document.getElementsByClassnNme

var elements = document.getElementsByClassName('container');

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        var bodies = document.getElementsByClassName('body');
        for (var j = 0; j < bodies.length; j++) {
            bodies[j].style.display = 'none';
        }
        this.children[1].style.display = "block";
    }
}

注意：IE8 或以下版本不支持 getElementsByClassName

或jQuery：

jQuery('#list1a').accordion();