带有自定义滚动条的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 B'/ P>

谢谢！

Answer 1

Demo

嗯，使用简化的标记很容易（我不能说使用带有jquery选择器返回集的array.sort()方法是重新排列网站上的表格数据的最简单方法）。在这里，我们只需获取<ul>的列表，然后根据第一个<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);

不容易：）

Answer 2

WORKING DEMO

修改
全功能演示：

DEMO

Huuuh :)完成了！
在网络上搜索如何按字母顺序对UL进行排序。但没有结果。

工作原理：

• 将所有现有的电影克隆到FIRST .slide（现在您不必像以前那样使用index -1魔法，以便在按下操作链接后获得正确的.slide < / LI>
• 创建了一个函数'sorty'：）
• 为每个父元素li
抓取所有.data()个电影名称为jQuery ul
• 现在，网格ul正在保存电影名称。
• 按字母顺序对第一个ul
中的所有.slide进行排序
• IT WORKS！

你可以看到我将你的一些代码从jQuery移动到了CSS（标有//添加！） ，我删除了if检查“所有”链接。
在HTML中添加了一个包含“信息”的正确.slide
jQuery现在将使用克隆元素填充此幻灯片！
我使用jQuery选择器:gt()来获取所有下一个元素但是定义了的元素 （这意味着Ex：如果我们使用$('.element:gt(0)').css({color:'red'});所有比元素'0'更重要的元素将有一个红色文本。只是第一个元素将具有默认颜色。）

<小时/> 如果您有任何疑问，请...询问！

现在看起来像几行：

$('.grid:gt(0)').find('ul:eq(0)').fadeOut(0);    // hide titles (not from the first .grid (:eq(0)))   
$('.grid:gt(0) ul:visible:not(:eq(0))').clone().appendTo( $('.grid:eq(0)') ); // after we hided all the titles - clone all UL elements to our first .slide

$('.slide:gt(0)').hide();

function sorty() {    // sort UL elements by holding data (the data will be the movie name! )
    $('.grid:eq(0) ul:gt(0)').each(function() {
        var txt1 = $(this).children('li:eq(0)').text();
        $(this).data('name', txt1);
    });
    var items = $('.grid:eq(0) ul');
    items.sort(function(a, b) {
        var charA = $(a).data('name');
        var charB = $(b).data('name');
        if (charA < charB) return -1;
        if (charA > charB) return 1;
        return 0;
    });
    var grid = $('.grid:eq(0)');
    $(grid).append(items);
    $('.grid:gt(0)').find('ul:eq(0)').show(); // redo visibility for infos.
}
sorty(); // run sorty!

$('ul.nav li').click(function() {
    $(this).addClass('btnSelect').siblings().removeClass('btnSelect');
    var i = $(this).index();
    $('.slide:visible').fadeOut(400, function() {
        $('.slide:eq(' + i + ')').fadeIn(400);
    });
});