Question

好的，我会尽力解释我想要完成的事情。

我知道如果我想让div留在页面的底部，我可以简单地这样做..

<div id="foo" style="position: fixed; bottom: 0: width: 100%">
   blah text
</div>

但我不希望这总是在页面底部..

我有这样的代码..

<html>
<head>
   <script type="text/javascript">
                function toggle_visibility(id) {
                   var e = document.getElementById(id);
                   if(e.style.display == 'block')
                      e.style.display = 'none';"
                   else
                      e.style.display = 'block';
                }
            </script>
</head>
<body>
<div id="firstDiv" style="display: block;">
   ......
</div>
<div id="secondDiv" style="display: none;">
   ......
</div>
<div id="thirdDiv" style="display: none;">
   ......
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

..重复20次或w / e ..

</body>
</html>

我想做http://www.snyderplace.com/demos/collapsible.html

之类的事情

但我真的不想使用别人的elses库，如果可能的话...我愿意使用jQuery等，只是不想使用别人的elses库，如果所有可能的，除非它非常裸露的骨头和不是一个完整的图书馆。

我只知道如何隐藏和显示当前的HTML。我知道我会不得不做类似的事情。

if (e.id = "firstDiv") {
   secondDiv.style.display = 'none';
   thirdDiv.style.display = 'none';
} elseif { ....
  ....
}

好的，我想能够做的是，如果我在[firstDiv]中有一个TON数据及其数据太多，页面有一个滚动条，而[secondDiv]和[thirdDiv]通常会推一直到页面...我希望[secondDiv]和[thirdDiv]堆叠在彼此的顶部，并始终在页面的底部......

但是如果我点击[secondDiv]那么[firstDiv]内容会明显消失，但是我希望[firstDiv]无论如何都要留在页面顶部，然后[secondDiv]正好在neath下面然后显示其HTML，而[thirdDiv]仍将保持静态在页面底部....

然后如果我点击[thirdDiv]那么它就会[firstDiv] [secondDiv]和[thirdDiv]按顺序堆叠在最顶层，而现在当然显示[thirdDiv]的HTML ..

LOOOONG解释后来我想要做一个可以隐藏其他div内容的Collapseable系统，同时保持它们的顺序但是扭曲的是[firstDiv]下面的div总是仍然显示在页面底部无论如何什么。

希望这是有道理的！

Answer 1

我最终解决了，不得不自己做。我的回答是可怕的，但确实有用......我很乐意，如果有人能帮忙重新写它，那就不是那么难看我会非常感激...

我最终必须创建一个Header作为（Accordion Header），然后在它下面的div作为保存HTML / Content结果的div ..

然后每个手风琴标题我只需设置onclick =＆＃34; toggle_visibility（＆＃39; firstDivHeader＆＃39;）;＆＃34;或者点击的标题然后它执行以下操作..

http://jsfiddle.net/t8Le7qqv/ - 我想添加完成的结果，任何人都想知道如何做到这一点。

<script type="text/javascript">
            function toggle_visibility(id) {
            if (id == 'firstDivHeader')
            {

            document.getElementById('firstDivResults').style.display = 'block';
            document.getElementById('firstDivHeader').style.top = '0';
            document.getElementById('firstDivHeader').style.position = 'fixed';

            document.getElementById('secondDivResults').style.display = 'none';
            document.getElementById('secondDivHeader').style.top = '';
            document.getElementById('secondDivHeader').style.bottom = '82px';
            document.getElementById('secondDivHeader').style.position = 'fixed';

            document.getElementById('thirdDivResults').style.display = 'none';
            document.getElementById('thirdDivHeader').style.top = '';
            document.getElementById('thirdDivHeader').style.bottom = '41px';
            document.getElementById('thirdDivHeader').style.position = 'fixed';

            document.getElementById('forthDivResults').style.display = 'none';
            document.getElementById('forthDivHeader').style.top = '';
            document.getElementById('forthDivHeader').style.bottom = '0px';
            document.getElementById('forthDivHeader').style.position = 'fixed';



            } else if (id == 'secondDivHeader')
            {

            document.getElementById('firstDivResults').style.display = 'none';
            document.getElementById('firstDivHeader').style.top = '0';
            document.getElementById('firstDivHeader').style.position = 'fixed';

            document.getElementById('secondDivResults').style.display = 'block';
            document.getElementById('secondDivHeader').style.top = '41px';
            document.getElementById('secondDivHeader').style.bottom = '';
            document.getElementById('secondDivHeader').style.position = 'fixed';

            document.getElementById('thirdDivResults').style.display = 'none';
            document.getElementById('thirdDivHeader').style.top = '';
            document.getElementById('thirdDivHeader').style.bottom = '41px';
            document.getElementById('thirdDivHeader').style.position = 'fixed';

            document.getElementById('forthDivResults').style.display = 'none';
            document.getElementById('forthDivHeader').style.top = '';
            document.getElementById('forthDivHeader').style.bottom = '0px';
            document.getElementById('forthDivHeader').style.position = 'fixed';



            } else if (id == 'thirdDivHeader')
            {


            document.getElementById('firstDivResults').style.display = 'none';
            document.getElementById('firstDivHeader').style.bottom = '0';
            document.getElementById('firstDivHeader').style.position = 'fixed';

            document.getElementById('secondDivResults').style.display = 'none';
            document.getElementById('secondDivHeader').style.top = '41px';
            document.getElementById('secondDivHeader').style.bottom = '';
            document.getElementById('secondDivHeader').style.position = 'fixed';

            document.getElementById('thirdDivResults').style.display = 'block';
            document.getElementById('thirdDivHeader').style.top = '82px';
            document.getElementById('thirdDivHeader').style.bottom = '0';
            document.getElementById('thirdDivHeader').style.position = 'fixed';

            document.getElementById('forthDivResults').style.display = 'none';
            document.getElementById('forthDivHeader').style.top = '';
            document.getElementById('forthDivHeader').style.bottom = '0px';
            document.getElementById('forthDivHeader').style.position = 'fixed';



            } else if (id == 'forthDivHeader')
            {

            document.getElementById('firstDivResults').style.display = 'none';
            document.getElementById('firstDivHeader').style.top = '0';
            document.getElementById('firstDivHeader').style.bottom = '';
            document.getElementById('firstDivHeader').style.position = 'fixed';

            document.getElementById('secondDivResults').style.display = 'none';
            document.getElementById('secondDivHeader').style.top = '41px';
            document.getElementById('secondDivHeader').style.bottom = '';
            document.getElementById('secondDivHeader').style.position = 'fixed';

            document.getElementById('thirdDivResults').style.display = 'none';
            document.getElementById('thirdDivHeader').style.top = '82px';
            document.getElementById('thirdDivHeader').style.bottom = '';
            document.getElementById('thirdDivHeader').style.position = 'fixed';

            document.getElementById('forthDivResults').style.display = 'block';
            document.getElementById('forthDivHeader').style.top = '123px';
            document.getElementById('forthDivHeader').style.bottom = '';
            document.getElementById('forthDivHeader').style.position = 'fixed';



            }
            }
            </script>

Answer 2

感谢您的设计模式。当我想要构建类似于你所做的东西时，它真的帮助了我。这是我的版本根据你的重写请求:)注意事项：我使用jQuery选择器而不是你使用的javascript，我的div命名不同，我的行高不同，但你会得到这个想法。

function toggle_visibility(id) {

    // Setup the accordion divs
    var sectionHeaderIds = ["#sectionOneHeader", "#sectionTwoHeader", "#sectionThreeHeader",
    "#sectionFourHeader", "#sectionFiveHeader", "#sectionSixHeader"];
    var sectionDetails = ["#sectionOneDetail", "#sectionTwoDetail", "#sectionThreeDetail",
    "#sectionFourDetail", "#sectionFiveDetail", "#sectionSixDetail"];

    var rowHeight = 30;
    var chosenSectionId = 0;
    var numSections = sectionHeaderIds.length;

    // Get the index of the selected section
    for (var i = 0; i < numSections; i++) {
        if (sectionDetails[i] == id) {
            chosenSectionId = i;
        }
    }

    // Loop through the divs
    for (var i = 0; i < numSections; i++) {

        var sectionHeader = $(sectionHeaderIds[i]);
        var sectionDetail = $(sectionDetails[i]);

        sectionHeader.css('position','fixed');

        if (sectionDetails[i] == id) {
            sectionDetail.css('display', 'block');
        } else {
            sectionDetail.css('display', 'none');
        }

        sectionHeader.css('top',(i <= chosenSectionId) ? i * rowHeight : '');
        sectionHeader.css('bottom',(i > chosenSectionId) ? (numSections - i - 1) * rowHeight : '');
    }
}

使手风琴/可折叠的DIV保持固定在页面的顶部和底部

2 个答案: