修改

Question

我正在创建一个带有词汇表的jQuery Mobile应用程序。每当用户触摸词汇表中的术语时，我希望它打开词汇表，打开带有该ID的可折叠词，然后滚动到它。

// get all links within an element, assign click handler
var links = element.find(".glossaryLink");
links.each(function(index){
    $(this).on("click", function(){
        var regex = /\W/g;
        var searchID = this.innerHTML.replace(regex, "").toLowerCase();
        // open the glossary
        window.location = "#glossary";
        var entry = $("#" + searchID);
        // This is working fine, the correct collapsible is opening
        entry.collapsible( "option", "collapsed", false );

        // But this always returns 0...
        var pos = entry.offset().top;
        // ...meaning this does nothing
        $.mobile.silentScroll(pos);
    }
});

代码似乎工作正常，因为我可以打开正确的可折叠（我在可折叠集中得到正确的<div>）但它的值pos始终为0，所以它不滚动。

jQuery API for offset()表示它不支持隐藏元素，但this post似乎表明可以在可折叠的情况下自动滚动。

非常感谢任何帮助！

修改

正如我在下面的评论中所说，如果时间＆lt; setTimeout（）技巧不起作用。 500毫秒。使用@Omar巧妙的分配侦听器的解决方案，然后立即将其踢出工作......

function addGlossaryClickHandlers(element){
    var links = element.find(".glossaryLink");
    links.each(function(index){
        $(this).on("click", function(){
            var regex = /\W/g;
            var searchID = this.innerHTML.replace(regex, "").toLowerCase();
            window.location = "#glossary";
            var entry = $("#" + searchID);
            // assign listener then kick it off by expanding the collapsible
            entry.on("collapsibleexpand", function(){
                var pos = entry.offset().top;
                $.mobile.silentScroll(pos);
            }).collapsible("expand");
        });
    });
}

...但上面的pos再次返回0.再次难倒，有人可以帮忙吗？虽然由于某种原因，可折叠的最后一个链接被打破了...... {/ p>

Answer 1

您希望将计算offset和silentScroll的逻辑移至setTimeout。

至于你的评论：通常，setTimeout(func, 0)是常态。但是，HTML5规范指出4ms，因此您将看到一些使用setTimeout(func, 4)的代码示例。

如果你对这有效的原因感兴趣，可以在这里深入了解发生的事情以及为什么setTimeout解决了这个问题（这都是由于事件造成的）：

https://stackoverflow.com/a/4575011/1253479

谢谢！

silentScroll（）到可折叠集内的特定项

修改

1 个答案: