'Accordion'样式面板 - 保持被点击元素相对于浏览器窗口的位置

Question

我遇到了一个小的可用性问题，我无法理解解决方案。

想象一下1 [上面]是一组大的div，比如典型网页的宽度，例如900px。

用户可以点击div来展开它，例如在[2]中点击了第一个div。

在[3]中，第二个div被点击，打开它并关闭第一个div。

麻烦的是，这个新打开的div的顶部从[2]的位置“向上移动”。这当然是正常的和预期的行为，但在我的特定应用程序中有很多类似的大型div，这对用户来说很困惑;用户的焦点不再是它的位置。

理想情况下，我想要的是像[4]这样的行为，其中点击的元素将保持在相对于浏览器窗口的相同位置。

显然，这需要将页面向下滚动一点以允许页面“向下移动”以进行补偿。这应该通常是，因为用户将向下滚动一下以查看这些div。

希望这是有道理的......

Ĵ

Answer 1

这是一个有效的解决方案，应用accordion jQuery IU对象：

（假设包含div和accordion对象id''手风琴'）

$("#accordion").on("accordionbeforeactivate", function (event, ui) {
    var pos = $(ui.newHeader).offset().top;// get current position of div being opened
    var view_pos = $(document).scrollTop();// get relative position on screen
    delta = pos - view_pos;// var not declared in order to make it available to other function
    });
$("#accordion").on("accordionactivate", function (event, ui) {
    var newPos = $(ui.newHeader).offset().top;
    $(document).scrollTop(newPos-delta );// reposition to same relative place on screen
});

FIDDLE

文档链接：http://api.jqueryui.com/accordion/#event-activate

Answer 2

$("#accordian h3").click(function(){
           //slide up all the link lists
          $("#accordian ul ul").slideUp();
          //slide down the link list below the h3 clicked - only if its closed
           if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }

有关详细信息click here