1

I've run into a small usability issue, and I can't get my head around the solution.

image of panel states

Imagine 1 [above] as being a set of large divs, say the width of a typical web page e.g. 900px.

A user can click on a div to expand it, for example in [2] the first div has been clicked.

In [3] the second div has been clicked, opening it and also closing the first one.

The trouble is that the top of this newly opened div 'moves up' from it's position at [2]. This is normal and expected behaviour of course, but in my specific application with lots of similar, large divs it is confusing for the user; the point of focus for the user is no longer where it was.

Ideally, what I want is behaviour like [4], where the clicked element will remain in the same place relative to the browser window.

Obviously this requires that the page has been scrolled down a bit to allow the page to 'move down' to compensate. This should usually be the case as the user will have scrolled down a bit to see these divs.

Hopefully this makes sense...

J

4

2 回答 2

4

这是一个可行的解决方案，应用一个accordionjQuery 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
});

小提琴

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

于 2013-08-20T15:05:29.300 回答
-1 
$("#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();
        }

更多详情请点击这里

于 2013-08-19T09:53:03.493 回答