带自定义滚动条的 Jquery 选项卡式导航

Question

请查看新的/更新的问题

https://stackoverflow.com/questions/7423874/jquery-navigation-and-jscrollpane-work-at-first-but-not-after-click

现在尝试添加 custom scroll bar 。 请参阅演示:

DEMO

到目前为止，我根本无法让它出现。我的本地源包括:jquery.ui、jquery、jquery.easing.1.3.js、jquery.mCustomScrollbar.css、jquery.mCustomScrollbar.js、jquery.mousewheel.min.js。

我相信这与:

$('.grid').fadeOut(0);

我只需在单击每个新菜单项后在 jquery 中的某个位置包含此行:

$("#mcs_container").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15);

此外，在 Chrome 浏览器中出现以下错误:

247Uncaught TypeError:无法读取 null 的属性“top” $.fn.mCustomScrollbar.btnsScrollTimerjquery.mCustomScrollbar.js:247 jQuery.event.handlejquery-latest.js:3001

谢谢!

Answer 1

Demo

嗯，通过简化的标记，这非常容易(我不能说，使用 array.sort() 方法和 jquery 选择器返回集是在网站上重新排列表格数据的最简单方法)。这里我们简单的取<ul>的列表s 并根据第一个 <li> 使用自定义排序函数对它们进行排序.

var nodeList = $(".grid ul").sort(function(a,b){
    return ($(a).find("li:first").text() > $(b).find("li:first").text());
});

$(".grid ul, .grid:gt(0)").remove();

$(".grid").append(nodeList);

再简单不过了:)