Question

我正在使用RocketMill的Ian Flynn提供的优秀手风琴菜单：http://www.rocketmill.co.uk/create-accordian-boxes-with-a-rotating-arrow-using-css-jquery

过去这对我来说效果很好，但我有一个新的客户端倾向于详细。当用户试图点击下一个所需的手风琴链接时，这会出现问题。手风琴正常工作，但是双曲线的内容会从页面上消失，呈现明显的可用性问题。

我想要做的是将活动（刚刚点击）“menuTitle”div的顶部与其父级的顶部“内容”div进行协调。

<div id="content">
    <div class="menuTitle">
        <strong>Title 1&hellip;</strong>
    </div>
    <div class="menuContent"> <!-- Sliding content box -->
        <h5>Sub-title 1</h5>
        <p>Content</p>
    </div> <!-- End of div class="menuContent" -->
<!-- THE ABOVE SEVEN LINES REPEAT FOR EACH FOLD OF THE ACCORDION -->
</div> <!-- End of div id="content" -->

我已经为此工作了大约三天，并咨询了很多很多站点，jQuery指南和威士忌。我不是jQuery专家。请帮忙！

哦......我做了一个jsFiddle。我的第一个：http://jsfiddle.net/Parapluie/CRXX8/

Answer 1

好吧，如果我明白你想要什么..

http://jsfiddle.net/CRXX8/4/

$(document).ready(function() {
    $('#content .menuTitle').on('click',function() {
        $('#content .menuTitle').removeClass('on'); // "closes" the closing menu arrow
        $('#content .menuContent').slideUp('normal'); // slide-closes the closing div
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on'); // "opens" the opening menu arrow
            $(this).next().slideDown('normal',function(){
                $('html,body').animate({scrollTop:$(this).prev().offset().top}, {queue: false,duration:250, easing: 'swing'}); // on complete slidedown, scroll the clicked .menuTitle to top of page
            });// slide-opens the opening div
        }
    }); // end of click event
}); // end of ready

<强>更新

由于你的被调用元素被包含在一个名为'#focusWide'的div中，你不必滚动浏览html,body，你必须滚动翻转div '#focusWide'并使用position().top istead offset().top。我添加了更多'11px'（一半的包装div填充）。

$('#focusWide').animate({scrollTop:$(this).prev().position().top + 11 + 'px'}, {queue: false,duration:250, easing: 'swing'});

http://jsfiddle.net/CUu7h/2/

Answer 2

我使用下面显示的功能，在大多数情况下效果很好。只需确保容器/包装器可滚动（使用overflow-y:auto）。见fiddle

function scrollIntoView(oElement, sContainer, fnCallback) {
    var oContainer, nContainerTop, nContainerBottom, nElemHeight, nElemTop, nElemBottom;

    if (!oElement || oElement.length <= 0) {
        return;
    }

    oContainer = (typeof sContainer == "object" ? sContainer : $(sContainer));
    nContainerTop = oContainer.scrollTop();
    nContainerBottom = nContainerTop + oContainer.height();
    nElemHeight = oElement.height() || 25;
    nElemTop = oElement[0].offsetTop - 50;
    nElemBottom = nElemTop + nElemHeight + 100;
    if ((nElemTop < nContainerTop) || (nElemHeight >= $(sContainer).height())) {
        oContainer.animate({ scrollTop: nElemTop }, { duration: "fast", complete: fnCallback });
    }
    else if (nElemBottom > nContainerBottom) {
        oContainer.animate({ scrollTop: (nElemBottom - $(sContainer).height()) }, { duration: "fast", complete: fnCallback });
    }
    else if (fnCallback) {
        fnCallback();
    }
}

jQuery scrollTop到容器div的顶部

2 个答案: